web-dev-qa-db-ja.com

マテリアルUI入力の下線の色を変更するにはどうすればよいですか？

暗い背景にあるMaterial UI Selectコンポーネントがあるので、この1つのコンポーネントだけを変更して、テキストと線の色がすべて白になるようにします。残りのSelectインスタンスは変更しないでください。

テキストとアイコンで色を変更することはできますが、classesプロップを使用して下線の色を設定する方法がわかりません。私の試みも、開いているアイコンを次の行に折り返すように思われます。これは問題を示す例です：

Edit Material demo

私は私のスタイルを次のように設定しました：

const styles = theme => ({
  underline: {
    borderBottom: '2px solid white',
    '&:after': {
      // The MUI source seems to use this but it doesn't work
      borderBottom: '2px solid white',
    },
  }
};

次に、次のように設定します。

<Select
  classes={{
    underline: classes.underline,     // Does it go here?
  }}
  inputProps={{
    classes: {
      underline: classes.underline,   // Or does it go here?
    },
  }}
>

このメソッドはテキストに対しては機能しますが（上記には表示されていませんが、リンクされた例では）、変更することができないのは下線の色だけです。何が欠けていますか？

cssmaterial-ui
10
Malvineous

2つのオプションを使用して、Selectコンポーネントの下線の色を変更できます

1。クラスでオーバーライドする

inputプロパティを使用して<Input />要素を作成し、underlineキーを使用してクラスを使用してオーバーライドします。

<Select
            value={this.state.age}
            onChange={this.handleChange}
            input={<Input classes={{
              underline: classes.underline,
            }}
             name="age" id="age-helper" />}>

私はあなたのサンドボックスにこれを適用し、これを見てみましょう ここ

2。 MuiThemeProviderを使用する

const theme = createMuiTheme({
  palette: {
    primary: green,
  },
});

<MuiThemeProvider/>を使用してテーマを適用します

このサンドボックスに両方を適用しました

カスタマイズ選択

19
anonymous_siva