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

基于此 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 这将在实际操作中演示此代码。

由于您已经创建了一个主题,您可以将覆盖放在该主题中,但您需要移动 <表格> 在 <MuiThemeProvider> 代码中已经包含的。

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

根据最新版本的材料界面。比如。 "@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",
          },
        },
      },
    },
  },
});

阿尔文的回答展示了如何在你的主题中做到这一点。您也可以使用 FormLabel asterisk class 通过 InputLabel props .

下面是我更改的代码中的相关部分。还请注意,如果输入处于“错误”状态,星号的默认行为是红色。例如,如果您添加 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);

在里面 梅v5 :

const theme = createTheme({

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

})

//在顶部导入createTheme和ThemeProvider

从“@mui/material/styles”导入{createTheme,ThemeProvider};

常数abc=()=>{

//add the theme at the top of your arrow function

const theme = createTheme({

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

})
return ( // wrap your jsx with <ThemeProvider>

    <ThemeProvider theme={theme}>

        <TextField required
            id="outlined-required"
            label="Full Name"
            type="text"
            size='small'
        />

    </ThemeProvider>

)

}

对于那些正在寻找带有文本字段的MUI v5的答案的人

const theme = createTheme({
   components:{
     MuiInputLabel:{
          styleOverrides:{
              asterisk:{
                 color:"#d32f2f"
              }
          }
       }
    }
});

试试这个简单易行的方法

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>
    )
}