マテリアルUIのテキストフィールドのスタイル設定方法

質問

をどのようにスタイルすればよいのか、ずっと考えていました。 material-ui 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を渡すことに対処する他の回答を見ようとしましたが、成功しませんでした。

私の能力の範囲内ですべてを試してみましたが、私が間違っていることを誰かが知っているかどうかを尋ねる必要があると思います。

現在、どのように見えるか

どのように解決するのですか？

を追加する必要があります。 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,
    }}
/>

余談ですが、ラベルにスタイルを設定したり、オーバーライドを使用することもできます。 はこちら .