如何在不使用主题的情况下自定义Material-UI的下划线样式？

import { makeStyles, createMuiTheme } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  underline: {
    '&::before': {
      borderBottom: '2px solid red', // 自定义下划线的样式
    },
    '&::after': {
      borderBottom: 'none', // 去掉默认的下划线
    },
  },
}));

const theme = createMuiTheme();

function MyComponent() {
  const classes = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <TextField
        label="Custom Underline"
        InputProps={{
          classes: {
            underline: classes.underline,
          },
        }}
      />
    </ThemeProvider>
  );
}