必要な*フィールドでアスタリスクの色を変更する方法

Question

私のフォームには2つの必須フィールドがあります。アスタリスクの色はredです。現在それは黒い.i amは材料UI React Libraryを使用していますか？これが私のコードです 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>
 _

Answer 1

Alvinの答えはあなたのテーマでこれを世界的に行う方法を示しています。 FormLabelアスタリスククラス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);
 _