2016-11-16 14 views
2

私はMaterial-UIをプロジェクトに使用していますが、デフォルトテーマスタイルtextTransform:"uppercase"をオーバーライドしようとしています。代わりにtextTransform:"capitalize"に置き換えてください。Material-UIのテーマスタイルを無効にすることができません

custom stylingでドキュメントに相談すると、インラインスタイルまたはカスタムクラスを使用する必要があることが通知されました。

className="capitalize"(クラスにはtext-transformという特性があります)を追加するか、style={{textTransform: "capitalize"}}を追加すると同じ結果が得られます。親divはCSSプロパティに渡されますが、最終的には子のspanによってオーバーライドされます。

これはintended behaviorですか、何か間違っていますか?

答えて

1

あなたはtextTransformを上書きするカスタムテーマを使用することができます。

const App =() => { 
    const customTheme = { button: { textTransform: 'capitalize' } }; 

    return (
    <MuiThemeProvider muiTheme={getMuiTheme(customTheme) }> 
     <Example /> 
    </MuiThemeProvider> 
) 
}; 

ワーキングjsFiddle:https://jsfiddle.net/88uq8751/7/

+0

これは私の目的のために見事に働いた、ありがとうございました。好奇心のために、すべてのボタンではなく、ボタンを変更する方法はありますか? – rickymetz

+0

はい。 RaisedButtonまたはFlatButtonでlabelStyleプロパティを使用します。labelStyle = {{textTransform: 'capitalize'}} –

0

あなたに質問をしてください。 しかし、これは動作を意図したものではないと私は思う。おそらく、あなたの他の小道具をチェックしてください。小道具の効果が上書きされているかもしれません。

それでも原因でない場合は、GitHubのmaterial-ui repoコードベースを確認してください。 material-uiで作業していた経験から、コードベースを使い、docを使わないことで解決した多くの問題。情報が役立つことを願っています。

関連する問題