Question

如何为helperText指定颜色，以突出显示TextField中的错误。我无法在材料中将颜色设置为helperText -UI。

我尝试使用MuiFormHelperText-root-406来应用CSS 但这不起作用

<Grid item xs={3}>
   <TextField
       label="EmailId" 
       name="emailId" 
       value={editItem.emailId} 
       onChange={this.editInputValue} 
       helperText={this.state.emailerror}  />      
</Grid>


.MuiFormHelperText-root-406{
   color:rgba(255,0,0,0.5);
 }

Answer 1

添加此代码：在className={classes.textField}中添加TextField

  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
    '& p':{
      color:'blue',
    },
  },

      <TextField
        id="standard-helperText"
        label="Helper text"
        defaultValue="Default Value"
        className={classes.textField}
        helperText="Some important text"
        margin="normal"
      />

Answer 2

@ arpita-patel的答案是正确的，但您应该知道也可以将其添加到CSS中：

.MuiFormHelperText-root {
    color:rgba(255,0,0,0.5);
}

或者基于父项：

.MuiTextField-root p {
    color:rgba(255,0,0,0.5);
}

以上每种方法都为我工作。我正在使用Material UI 4.0.2

Answer 3

我发现为 TextField 组件设置 helperText 样式的最佳方式类似于 Arpita Patel 提出的方式。唯一的区别是我使用的是 classes 属性而不是 className，正如 Material-UI docs here

中所述

你会发现 TextField 组件只能使用一个名为 root 的 CSS 规则名称（全局类称为 .MuiTextField-root）。

所以基本上你需要使用下面的代码来设置你喜欢的 helperText 样式：

JSX（基于您的初始代码示例）

const classes = useStyles();

<TextField
  label="EmailId" 
  name="emailId" 
  value={editItem.emailId} 
  onChange={this.editInputValue} 
  helperText={this.state.emailerror}
  classes={{root: classes.textField}}
/>

样式通过 makeStyles

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  textField: {
    '& p':{
      /* your style for helperText here*/
    }
  }
})

我希望这个简短的解释对那些想知道如何做到这一点的人有所帮助。

Answer 4

如果@ ange-loron的答案无效，请尝试添加!important：

.MuiFormHelperText-root {
    color: rgba(255,0,0,0.5) !important;
}

如何为helperText材质ui分配颜色以突出显示TextField中的错误

4 个答案: