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

Question

我目前正在使用Material UI .

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

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

还有 CSS:

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

但是，不知怎的，我只得到黑色背景，字体仍然是黑色。有谁知道如何使用 Material UI 正确更改 TextField 的字体颜色？

Answer 1

在 Material UI v5 中，您可以使用 sx 属性来执行此操作:

<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" />

现场演示