更改 Material UI 中的 TextField 字体颜色？

我目前正在使用材质用户界面 https://mui.com.

我在尝试更改多行的字体颜色时遇到问题TextField.

<TextField className = "textfield"
           fullWidth
           multiline
           label   = "Debugger"
           rows    = "10"
           margin  = "normal"/>

还有CSS：

.textfield {
    background-color: #000;
    color: green;
}

然而，不知怎的，我只得到黑色背景，字体仍然是黑色。有谁知道如何正确更改字体颜色TextField使用材质用户界面？

In 材质 UI v5，你可以使用sx prop:

<TextField sx={{ input: { color: 'red' } }} />

如果您想要更可重用的东西，则需要更长的方法：

const options = {
  shouldForwardProp: (prop) => prop !== 'fontColor',
};
const StyledTextField = styled(
  TextField,
  options,
)(({ fontColor }) => ({
  input: {
    color: fontColor,
  },
}));

<StyledTextField label="Outlined" fontColor="green" />
<StyledTextField label="Outlined" fontColor="purple" />

现场演示