Material-UIのボタンで英小文字を小文字のまま出力する

Materil-UIの<Button>はデフォルトではアルファベットが全て大文字になります。

例:

import Button from '@material-ui/core/Button'

// 略

<Button color="secondary" variant="contained">
  Webで続きを読む
</Button>

f:id:yucatio:20181127090233p:plain

これを小文字を小文字のまま出力するには、textTransform: 'none'を指定します。

import Button from '@material-ui/core/Button'
import { withStyles } from '@material-ui/core/styles'

// 略

const styles = {
  webButton: {
    textTransform: 'none',
  }
}

// 略

<Button color="secondary" variant="contained" className={classes.webButton}>
  Webで続きを読む
</Button>

// 略

export default withStyles(styles)(SampleComponent)

f:id:yucatio:20181127090247p:plain

小文字は小文字のまま出力することができました。

マテリアルデザインの公式ページ ( Buttons - Material Design ) では、ボタンのテキストは本文と区別するために全て大文字にすべきと書かれています。英語圏の場合はにそのようにするべきかと思いますが、日本語を主に使用するケースで上記のような場合では小文字を使用してもよいように思います。