MUIと他のCSSを共存させる

「MUIのボタンにTailwindのクラスを当てたのに効かない」——これは設定ミスではなく、MUIのスタイルの作られ方から生じる当然の結果です。

この章では原因と、v9で用意されている解決策を扱います。

学習者

className="bg-red-500" を付けたのに色が変わらない。!important を付けたら効いたけど、これでいいの？

動きはしますが、!important を積み重ねると、あとから誰も上書きできない状態になります。もっと素直な方法があります。

なぜ外からの上書きが効かないのか

MUIのスタイルはEmotionが実行時に生成します。生成されるセレクタは、コンポーネントのクラスと組み合わさって詳細度が高くなりがちです。

一方、Tailwindのユーティリティクラスは単一クラスなので詳細度が低く、素直に書くと負けます。

詳細度の勝負で殴り合うのではなく、勝ち負けのルール自体を変えるのが正解です。そのための仕組みがCSSのカスケードレイヤーです。

カスケードレイヤー（@layer）は、CSSの優先順位を「詳細度」より先に決める仕組みです。

重要な性質が2つあります。

2つ目が直感に反するので注意してください。レイヤーの外にあるスタイルは、レイヤー内のスタイルに必ず勝ちます。

つまり、MUIのスタイルをレイヤーに入れてしまえば、レイヤー外の自前CSSはそれだけで勝てるようになります。詳細度を気にする必要がなくなります。

Next.jsのApp Routerでは、2章で置いた AppRouterCacheProvider にオプションを渡します。

<AppRouterCacheProvider options={{ enableCssLayer: true }}>
  {children}
</AppRouterCacheProvider>

tsx

これでMUIが生成するスタイルが @layer mui に入ります。

Next.js以外の構成では、StyledEngineProvider に同じ意味のpropがあります。

<StyledEngineProvider enableCssLayer>
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
</StyledEngineProvider>

tsx

レイヤーに入れただけでは足りません。レイヤーの順番を宣言する必要があります。

Tailwind CSS v4を使う場合、公式ドキュメントが示している順番はこれです。

@layer theme, base, mui, components, utilities;

css

mui が utilities より前にあるのがポイントです。後ろのレイヤーが勝つので、Tailwindのユーティリティクラス（utilities）がMUIのスタイルに勝てるようになります。

この宣言により、!important なしでTailwindのクラスでMUIコンポーネントを上書きできます。

<Button variant="contained" className="rounded-none">
  角丸なしのボタン
</Button>

tsx

MUIのスタイルを1つの mui レイヤーにまとめるのではなく、役割ごとに分けることもできます。

createTheme({ modularCssLayers: true });

tsx

これを有効にすると、MUIのスタイルが5つのレイヤーに分かれます。

順番の宣言も細かくなります。

@layer theme, base, mui.global, mui.components, mui.theme, mui.custom, mui.sx, components, utilities;

css

「MUIの基本スタイルだけ上書きしたいが、sx で書いた指定は残したい」といった細かい制御が必要になったときの選択肢です。最初から使う必要はありません。

先生

技術的には共存できますが、「ボタンはMUI、カードはTailwind」のように混ぜると、どちらの流儀で書くべきか毎回迷うことになります。

併用がうまくいくのは、役割で線が引けるときです。

避けたいのは、同じ1つのボタンをMUIで作ってTailwindで上書きする、という重ね方です。技術的には可能でも、読む人にとっては「どちらを直せばいいのか」が分からなくなります。