如何更改必填 * 字段中的星号颜色

Posted 2023-02-22

【中文标题】如何更改必填 * 字段中的星号颜色

【英文标题】：how to change the asterisk color in required * field

【发布时间】：2019-07-23 00:21:32

【问题描述】：

我的表单中有两个必填字段。我希望星号颜色应该是red。目前它显示为黑色。我正在使用材质 UI 反应库？ 这是我的代码 https://codesandbox.io/s/r7lq1jnjl4 文件 https://material-ui.com/demos/text-fields/

<FormControl>
                  <TextField
                    required
                    InputLabelProps=
                      shrink: true
                    
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />
                </FormControl>

【参考方案1】：

基于 documentation on how to customize components through theme overrides 的 FormLabel (which will also include InputLabel)，您应该使用 createMuiTheme 并添加以下覆盖：

const formLabelsTheme = createMuiTheme(
  overrides: 
    MuiFormLabel: 
      asterisk: 
        color: '#db3131',
        '&$error': 
          color: '#db3131'
        ,
      
    
  
)

然后，您将 <form> 包装在 <MuiThemeProvider> 中，如下所示：

<MuiThemeProvider theme=formLabelsTheme>
  <form noValidate autoComplete="off">

...
...
...

  </form>
</MuiThemeProvider>

这是一个forked code sandbox，它演示了此代码的实际作用。

由于您已经创建了一个主题，您可以将覆盖放在该主题中，但您需要将您的 <form> 移动到代码中已有的 <MuiThemeProvider> 内。

生成的表单标签如下所示：

【参考方案2】：

Alvin 的回答显示了如何在您的主题中全局执行此操作。您也可以通过InputLabel props 使用FormLabel asterisk class 逐案执行此操作。

以下是我更改的代码中的相关部分。另请注意，如果输入处于“错误”状态，星号的默认行为是红色。例如，如果您将error 属性添加到TextField，星号将显示为红色，但这也会对星号之外的样式产生其他影响。

const styles = 
  labelAsterisk: 
    color: "red"
  
;

<InputLabel
                    FormLabelClasses=
                      asterisk: this.props.classes.labelAsterisk
                    
                    required
                    shrink
                    htmlFor="age-native-simple"
                  >
                    Age
                  </InputLabel>

                  <TextField
                    required
                    InputLabelProps=
                      shrink: true,
                      FormLabelClasses: 
                        asterisk: this.props.classes.labelAsterisk
                      
                    
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />

const StyledApp = withStyles(styles)(App);

【参考方案3】：

试试这个简单易行

render()
    const name = <p>Name<span style= color: "red"  >*</span></p>
    const email = <p>Email<span style= color: "red"  >*</span></p>
    .
    .
    .
    return (
        <div>

            <TextField type="text" label=name />//or Input tag
            <TextField type="email" label=email />//or Input tag
            .
            .
            .
        </div>
    )

【参考方案4】：

根据最新版本的材料 UI。 IE。 "@mui/material": "^5.0.1"

我们可以这样做：

 <FormLabel required>Name:</FormLabel>

在主题中：

import  createTheme  from "@mui/material";

export const theme = createTheme(
  components: 
    MuiFormLabel: 
      styleOverrides: 
        asterisk: 
          color: "#db3131",
          "&$error": 
            color: "#db3131",
          ,
        ,
      ,
    ,
  ,
);

【参考方案5】：

在 Mui v5 中：

const theme = createTheme(

  components: 
    MuiFormLabel: 
      styleOverrides: 
        asterisk: color:"red",
      ,
    ,
  ,

)