在ReactJS中更改TextField的线条颜色

import React from 'react';
import TextField from '@mui/material/TextField';

const styles = {
  textField: {
    '& .MuiInput-underline:before': {
      borderBottomColor: 'red', // 更改输入框未选中状态下的线条颜色
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'green', // 更改输入框选中状态下的线条颜色
    },
  },
};

const CustomTextField = () => {
  return (
    <TextField
      label="Example"
      variant="standard"
      InputProps={{
        classes: {
          root: styles.textField,
        },
      }}
    />
  );
};

export default CustomTextField;