web-dev-qa-db-ja.com

入力フローティングラベルの色を変更するマテリアルUI

Material-UIのテキストフィールドのフローティングタイトルの色を変更したい。

ドキュメントに記載されているように、オブジェクトの色をfloatingLabelStyleとして渡します。

<TextField floatingLabelStyle={{color: somecolor }} />

しかし、これはラベルの両方の状態に当てはまります-灰色であるはずのフォーカス外の入力の上と入力の上にホバリングします。

私はある種のCSSトランジションを上書きしていると思いますが、それを機能させる方法がわかりません。助言がありますか？

javascriptcssreactjsmaterial-ui
10
Łukasz Smoczyński

InputLabelのスタイルを設定する必要があります：

const styles = {
    floatingLabelFocusStyle: {
        color: "somecolor"
    }
}

<TextField
    label="Test"
    id="test"
    InputLabelProps={{
        className: classes.floatingLabelFocusStyle,
    }}
/>
4
Borzh

FloatingLabelFocusStyleを使用する必要があります。

const styles = {
    floatingLabelFocusStyle: {
        color: "somecolor"
    }
}

<TextField floatingLabelFocusStyle={styles.floatingLabelFocusStyle} />
3
Jan Franz Palngipang

これはカチカチします

  InputLabelProps={{
    style: { color: '#fff' },
  }}
2
Malte Schulze-Boeing

テーマから作業している場合、これを上書きセクションに追加すると、

overrides: {
    MuiInputLabel: {
      root: {
        color: "rgba(255, 255, 255, 0.87)",
      },
    },
  },
1
Jody S

フォーカスイベントのラベルの色を変更する方法は2つあります。

  1. MakeStyle関数の使用：サンドボックスへのリンク： https://codesandbox.io/s/material-demo-xnz77 説明：JSSを使用したstyle.jsを使用して、より抽象化しました。 makestyle関数を使用してクラスを作成します。その後、私は入力の小道具を使用しました：

    InputLabelProps={{ classes: { root: classes.inputLabel, focused: "focused" } }}

    したがって、フォーカスされたときにラベルの色を変更するテキストフィールドを作成します。

  2. WithStylesの使用：

    参照1： https://codesandbox.io/s/3vzr41zmjm

    参照2： https://github.com/mui-org/material-ui/issues/1384

    参照からの正確なコードを使用していませんが、はい、要件に合わせて少し変更しました。

    ここにsandBoxへのリンクがあります https://codesandbox.io/s/material-demo-s9g4t

0
kshitiz saini

これはバグです。一緒に報告してください。

説明

ちょうど彼らのソースコードを通過しました。最初は、ラベルの色はhintColorに設定されています。

const styles = {
  ...
  floatingLabel: {
    color: hintColor,
    pointerEvents: 'none',
  },
  ...
}

フォーカスすると、ラベルの色がfocusColorからmuiThemeに変更されます

if (state.isFocused) {
  styles.floatingLabel.color = focusColor;
}

そして、値が指定されている場合はオーバーライドされます

<TextFieldLabel
  style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
  ...
>

したがって、プロパティは常にオーバーライドされるため、常に同じ色が表示されます。

0
bigOmega