时间戳

首页 > 解决方案 > 在 MUI 中更改 TextField 字体颜色？

reactjs - 在 MUI 中更改 TextField 字体颜色？

问题描述

我目前正在使用MUI。

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

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

和CSS：

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

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

标签： reactjsmaterial-ui

解决方案

我提到了这个页面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"
/>

希望这会奏效。

推荐阅读