how to change the asterisk color in required * field

Question

I have two required fields in my form .I want the asterisk color should be red.Currently it is showing black .I am using material UI react library ? here is my code https://codesandbox.io/s/r7lq1jnjl4 documents 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>

Bihari

Answer 1

Based on this documentation on how to customize components through theme overrides for a FormLabel (which will also include InputLabel), you should use createMuiTheme and add the following overrides:

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

Then, you wrap your <form> within a <MuiThemeProvider> like so:

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

...
...
...

  </form>
</MuiThemeProvider>

Here is a forked code sandbox which demonstrates this code in action.

Since you are already creating a theme, you could just put your overrides in that theme, but you'll need to move your <form> to be within the <MuiThemeProvider> that you already have in your code.

The resulting form labels look like this:

Noted

What is the solution if I make only one field required instead of all? – Mandibular

Answer 2

In Mui v5 :

const theme = createTheme({

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

})

Curriery

This also works for checkboxes etc by customizing MuiFormControlLabel in the same way. – Carabiniere

Answer 3

As per the latest version of material UI. ie. "@mui/material": "^5.0.1"

We can do it like this:

 <FormLabel required>Name:</FormLabel>

And in the theme:

import { createTheme } from "@mui/material";

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

Downstroke

Answer 4

For those who are looking answer for MUI v5 with TextField outlined variant

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

Arcturus

where did you find this info from (the documentation link), does not seem to work for FormControl along with – Implement

Answer 5

Alvin's answer shows how to do this globally in your theme. You can also do this on a case-by-case basis using the FormLabel asterisk class via the InputLabel props.

Below are the relevant portions from your code that I changed. Also note that the default behavior for the asterisk is for it to be red if the input is in an "error" state. For instance if you add the error property to the TextField the asterisk will be red, but that also has additional effects on styling beyond the asterisk.

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

Bloodsucker

Answer 6

//import createTheme and ThemeProvider at the top

import { createTheme, ThemeProvider } from '@mui/material/styles';

const 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>

)

}

Hardness

Answer 7

I have changed using direct CSS class property options in the following way

.MuiFormLabel-asterisk {
    color: red;
}

Traci

Answer 8

Try to add sx props to InputLabelProps.

<TextField
    required
    InputLabelProps={{
        shrink: true,
        sx: {".MuiInputLabel-asterisk": {color: "red"}}
    }}
    id="standard-name"
    label="Name"
    margin="normal"
    helperText="Some important text"
/>

Columbuscolumbyne

Answer 9

Try this simple and easy

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

Grantland