5
votes

comment changer la couleur de l'astérisque dans le champ obligatoire *

J'ai deux champs obligatoires dans mon formulaire. Je veux que la couleur de l'astérisque soit rouge . Actuellement, il est noir. J'utilise la bibliothèque de réactions de l'interface utilisateur matérielle? voici mon 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>

reactjs material-design material-ui react-redux

0 commentaires

3 Réponses :

3
votes

D'après cette documentation sur la façon pour personnaliser les composants via des remplacements de thème pour un FormLabel (qui inclura également InputLabel ) , vous devez utiliser createMuiTheme et ajouter les remplacements suivants:

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

...
...
...

  </form>
</MuiThemeProvider>

Ensuite, vous enroulez votre

dans un comme ceci:

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

Voici un sandbox de code fourchu qui montre ce code en action.

Puisque vous créez déjà un thème, vous pouvez simplement mettre vos remplacements dans ce thème, mais vous aurez besoin pour déplacer votre

vers le que vous avez déjà dans votre code.

Les libellés de formulaire résultants ressemblent à ceci:

0 commentaires

2
votes

La réponse d'Alvin montre comment faire cela globalement dans votre thème. Vous pouvez également le faire au cas par cas en utilisant le FormLabel classe astérisque via le code InputLabel > accessoires .

Voici les parties pertinentes de votre code que j'ai modifiées. Notez également que le comportement par défaut de l'astérisque est qu'il soit rouge si l'entrée est dans un état "erreur". Par exemple, si vous ajoutez la propriété error au TextField , l'astérisque sera rouge, mais cela a également des effets supplémentaires sur le style au-delà de l'astérisque.

const StyledApp = withStyles(styles)(App);

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

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

const styles = {
  labelAsterisk: {
    color: "red"
  }
};

0 commentaires

-1
votes

Essayez ce simple et facile

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

0 commentaires