material ui のFormControlLabelの色をデフォルトから別の色に変えたいという時や、
MuiButtonのlabelの色を変えたいという時があるかと思うんですが、
そういう場合に使えるワザを紹介します。

環境：
　react@16.8.6
　@material-ui/core@4.1.1

FormControlLabelのlabelの色を変える

material ui のデフォルトはこうです

デフォルトのコード


<FormControlLabel
        control={
          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
        }
        label="Secondary"
      />

Secondaryという文字を青に変えたいとき

<FormControlLabel
        control={
          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
        }
        label={
          <span style={{ color: "blue" }}>
            Secondary
          </span>
        }
      />

label= に中括弧つけて、Secondaryをspanで挟んで色指定してあげれば、

色が青に変わりました！

MuiButtonのlabelの色を変えたい！

ボタンを実装して、ボタン自体の色は変えられたけど、どうしてもlabelの色が変わんない・・・
こんなときないですか？

このボタンのlabelをどうしても白にしたい！

まずはmaterial uiのファイルを作る

theme.jsを作り、createMuiThemeをimportする

アプリのデベロッパーツールでボタンのlabelのところをクリックすると
下図のようにでるので、theme.jsでoverridesの中に書いていく

theme.js

import { createMuiTheme } from "@material-ui/core/styles";

export const theme = createMuiTheme({
overrides: {
    MuiButton: {
      label: {
        color: "white",
      },
    },
  },
});

↓白に変わりました！

このやり方はスタイルを無理やり変えてる感あるので、
もっといいやり方があれば教えてください。