在 MUI 中更改 TextField 字体颜色？

Question

我目前正在使用 MUI 。

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

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

和CSS：

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

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

原文由 sub_o 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我提到了这个页面 TextField API

我使用类覆盖 TextField

 const styles = theme => ({
    multilineColor:{
        color:'red'
    }
});

使用 InputProps 将类应用到 TextField。

 <TextField
  className = "textfield"
  fullWidth
  multiline
  InputProps={{
    className: classes.multilineColor
  }}
  label   = "Debugger"
  rows    = "10"
  margin  = "normal" />

编辑 在旧版本中，您必须指定密钥 input

 <TextField
    className = "textfield"
    fullWidth
    multiline
    InputProps={{
        classes: {
            input: classes.multilineColor
        }
    }}
    label   = "Debugger"
    rows    = "10"
    margin  = "normal"
/>

希望这会奏效。

原文由 anonymous_siva 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

现场演示

原文由 NearHuscarl 发布，翻译遵循 CC BY-SA 4.0 许可协议