[Material UI v5] 独自Themeをカスタマイズする方法's

Material UI v5　独自Themeカスタマイズ方法　

はじめに

こんにちは、京都人です。名古屋でフロントエンドエンジニアをやっております。

この度、新規プロジェクトでMUIを使い倒す実装方針なりましたので、そのキャッチアップ兼、来年新卒で入るエンジニアの後輩さんのための、実務導入も兼ねて記載している背景になります。

目次

• themeから独自スタイルをカスタマイズする
• defaultPropsを変更したいとき
• スタイルの上書き
• ownerStateにthemesのスタイルを読み込みたい

themeから独自スタイルをカスタマイズする

createTheme内に記載していきます。基本的になんでもスタイルを変更できます。以下が記述サンプルになります。

const theme = createTheme({
    palette: {
        primary: {
            main: Colors.primary,
        },
        secondary: {
            main: Colors.secondary,
        },
    },
    components: {
        SampleComponent: {
            defaultProps: {
                sampleProps: true,
            },
        },
    },
});

全ての既存MUIコンポーネントのスタイルや擬似要素のスタイルを変更することが可能になる。

• defaultPropsを変更したいとき

  既存Propsのスタイルが変更可能になります。基本的に、MUIコンポーネントのDocsのページ最下部にButton-APIのリンクがあるので、そのリンク先のProps内ならなんでも変更可能です。

    components: {
      MuiButtonBase: {
        defaultProps: {
          disableRipple: true,
        },
      },
    },
  

• スタイルの上書き

  styleOverridesオブジェクト内に記述することで、既存のMUIコンポーネントのスタイルを変更することが可能になります。rootはベーススタイルという意味です。

    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            fontSize: '1rem',
          },
        },
      },
    },
  

  さらに条件を分けてスタイルをカスタマイズしたい場合の記述方法もあります。その際は「ownerState」を使用します。

  styleOverrides: {
      root: ({ ownerState }) => ({
          ...(ownerState.variant === 'contained' &&
              ownerState.color === 'primary' && {
                  backgroundColor: '#202020',
                  color: '#fff',
      }),
  }),
  

  今回の場合だと、既存Propsのvariantがconteinedの時且つ、既存PropsのcolorがPrimaryのときのスタイルを設定しています。このように複数のPropsが存在する場合のスタイル分けも可能になります。

• ownerStateにthemesのスタイルを読み込みたい

  いちいちゼロからCSSを書いていられない場合は、themeを追加して回避することができます。

  components: {
      MuiSlider: {
        styleOverrides: {
          valueLabel: ({ ownerState, theme }) => ({
            ...(ownerState.orientation === 'vertical' && {
              backgroundColor: 'transparent',
              color: theme.palette.grey[500],
            }),
          }),
        },
      },
    },