Zenn
⛳

MUIでテーマを設定する

2024/01/24に公開
CSS
React
#
style
mui
tech

MUI でのテーマの設定方法

コンポーネントの色や文字サイズ、breakpoint などを変更できます。

const theme = createTheme({
  primary: {
    main: "#123456",
  },
});

<ThemeProvider theme={theme}>{/* Components */}</ThemeProvider>;

新しい変数を追加するには、type の設定が必要です。

declare module "@mui/material/styles" {
  interface Theme {
    status: {
      danger: string;
    };
  }
  interface ZIndex {
    globalHeader: number;
  }
}

テーマ設定の注意点

範囲

コンポーネント単体にThemeProviderを適用し、部分的にテーマを設定することが可能です。
ThemeProviderでラップしたコンポーネントを、別のテーマを設定したThemeProviderでラップした時、外側のテーマはコンポーネントには適用されません。
テーマを設定しているコンポーネント内から外側のテーマにアクセスするときは、useTheme を使う必要があります。

import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";

function Child() {
  const outerTheme = useTheme();
  const theme = createTheme({
    ...outerTheme,
    palette: { status: { danger: "#654321" } },
  });
  return (
    <ThemeProvider theme={theme}>
      <span>{`spacing ${theme.spacing}`}</span>
    </ThemeProvider>
  );
}

TypeScript: Expression produces a union type that is too complex to represent. ts(2590)

theme をマージするとき、SSR のアプリケーションをビルドすると複雑すぎて表現できない共用体型を生成しますという型エラーでビルドが失敗する現象に出会いました。

MUI のスタイルの優先度

スタイルの優先度は、一般的に CSS のカスケードと同様に、特定性と宣言の順序に基づいています。ただし、MUI では以下の優先度が適用されます（高い順）。
テーマは上書き可能です。

  1. Inline sx prop: このプロップはインラインスタイルとして適用されるため、他のほとんどの方法よりも優先されます。
  2. className with CSS-in-JS: スタイルが特定のコンポーネントに直接適用されるため、非常に特定的です。
  3. Global theme customization: テーマによるスタイルは、デフォルトのスタイルよりも優先されますが、コンポーネントに直接適用される className や sx prop には劣ります。
  4. MUI default styles: MUI に組み込まれているデフォルトのスタイルが最も低い優先度です。
GitHubで編集を提案

Discussion