【Material-ui】Buttonコンポーネントで文字が大文字になるのを小文字のまま表示する

スポンサーリンク

ボタン内のテキストを小文字のまま表示する

material-ui等のライブラリで、ボタンコンポーネントを使うとラベルの英字が勝手に大文字になってしまいます。あえて小文字のまま表示したい場合には余計なお世話です。

ボタンのラベルを小文字のまま表示するには、ラベルのstyleに下記のプロパティを指定すればOKです。

text-transform: none;

ライブラリではデフォルトでこのプロパティがuppercase等に指定されているものと思われます。詳細は下記公式を参照してください。

text-transform-CSSリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表