2017-10-27 17 views
1

material-ui.nextテキストフィールド(React JS)のスタイルを設定する方法を試しています。material-uiテキストフィールドのスタイル方法

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

私の問題は、私は白に変更するには、テキストフィールドの色を取得するように見えることができないということです。(私は関連部分を添付している)、次のように

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

私のクラスが作成されます。私は全体のテキストフィールドにスタイリングを適用することができるようです(幅のスタイリングが機能するなど)...しかし、私はチェーンの下で実際の入力にスタイルを適用していないという問題があると思います。

私はinputPropsを渡すことに関して他の答えを見ようとしましたが、成功しませんでした。

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

お時間をいただきありがとうございます。よろしくです。 よろしくお願いします。アンドレ

What it currently looks like

+0

役に立たない画像、私はどのようにcssがあなたのテキストフィールドの色に適用されるかを見るためにデバッグコンソールを使うべきだと思います –

答えて

0

それは "テーマ" を作成することによって固定可能です。テーマファイルはcreateMuiThemeを使用

<MuiThemeProvider theme={my_theme_name}> 
    <PageLayout/> 
</MuiThemeProvider> 

とパレットセクション含ま:

はまずIテーマのメインアプリケーションコンポーネントをレンダリング 『暗い』:キャッチ「タイプた

export const my_theme_name = createMuiTheme({ 
    palette: { 

    type: 'dark', 
    }, 
}); 

を"仕様。それが私の問題を解決しました。

さらに詳しい情報はこちら[] []

0

TextFieldinputStyle小道具を使用してみてください。 docsから...

inputStyle(オブジェクト) - のTextFieldの入力 要素のインラインスタイルをオーバーライドします。 multiLineがfalseの場合、入力のスタイルを定義します。 要素。 multiLineがtrueの場合: というコンテナのスタイルを定義します。

<TextField inputStyle={{ backgroundColor: 'red' }} /> 
関連する問題