web-dev-qa-db-ja.com

material-uiテキストフィールドのスタイル設定方法

material-ui.next textfield コンポーネントのスタイルを設定する方法を探していました。

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

クラスは次のように作成されます。

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

私の問題は、テキストフィールドの色を白に変更できないように見えることです。 （幅のスタイリングが機能するなどの理由で）テキストフィールド全体にスタイリングを適用できるようですが...問題は、チェーンのさらに下の実際の入力にスタイルを適用していないことです。

InputPropsを渡すことに関する他の回答を見てみましたが、成功しませんでした。

私の能力を最大限に試しましたが、私が間違っていることを誰かが知っているかどうか尋ねる必要があると思います。

現在の様子

textfield with a blue background and a slightly lighter blue label

javascriptreactjsmaterial-ui
19
Andre DiCioccio

InputPropsプロパティをTextFieldに追加する必要があります。

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',            
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
    input: {
        color: 'white'
    }
});

JSX：

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
    InputProps={{
        className: classes.input,
    }}
/>

余談として、 here のようにラベルのスタイルを設定したり、オーバーライドを使用したりすることもできます。

16
Craig Myles

これはインラインスタイルのソリューションです。

<TextField
    style={{
        backgroundColor: "blue"
    }}
    InputProps={{
        style: {
            color: "red"
        }
    }}
/>
6
Jonathan R

inputStyleでTextField propを使用してみてください。 docs ...から.

inputStyle（オブジェクト）-TextFieldの入力要素のインラインスタイルをオーバーライドします。 multiLineがfalseの場合：入力要素のスタイルを定義します。 multiLineがtrueの場合：textareaのコンテナーのスタイルを定義します。

<TextField inputStyle={{ backgroundColor: 'red' }} />
2
Alex

テーマ内でスタイルを維持することをお勧めします。

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#fff",
      },
    },
  },
});
1
Romero Junior

本当に何を変えようとしているのかにかかっています。

ドキュメントには、カスタムTextFieldsの例がたくさんあります。ここをご覧ください。

https://material-ui.com/demos/text-fields/#customized-inputs

カスタマイズの詳細については、次を参照してください。

https://material-ui.com/customization/overrides/

そして

https://material-ui.com/customization/themes/

色の変更に！importantを使用してみましたか？アウトライン化されたTextFieldの境界線にデフォルトの色を設定しようとしたときに同じ問題が発生しました

これを見てください： https://stackblitz.com/edit/material-ui-custom-outline-color

1
Peter Catalin

ここでのすべての答えは、InputPropsまたはinputPropsを使用してスタイルを設定する方法を示していますが、その理由と動作については誰も説明していません。そして、inputPropsとInputPropsの違いを誰も説明しませんでした

<TextField    
    variant="outlined"
    // inputProps are used to pass things that are native to the underlying html input element, things like name, id, style.
    inputProps={{
      style: { textAlign: 'center' },
    }
    // this passes props to the wrapper material component, can be  one of the following: Input, FilledInput, OutlinedInput
    // You can pass here anything that the underlying material component uses like error, value, onChange, and classes
    InputProps={{
       className: styles.slider_filter_input, 
       // usually you dont need className, the classes object will be sufficient
       //  but wanted to show that you can also use it (this will put your class on div of the InputBase)
       classes: {
          root: classes.root
          focused: classes.focused
          // the list of keys you pass here depend on your variant
          // if for example you used variant="outlined" then you need to check the css api of the OutlinedInput and so an
       }
    }}
/>

最後に、上記のアイデアを示す作業用コードサンドボックスがあります https://codesandbox.io/s/material-ui-drawer-8p6wv

0
ehab