編集

Material UI v7 がリリース

#Material UI #Next.js #React

Material UI v7 が正式にリリースされました。

https://mui.com/blog/material-ui-v7-is-here/

ESM サポートの改善や非推奨になっていた API の削除に加えて、スロットパターンの実装と CSS レイヤーのサポートが行われています。

#スロットパターンの実装

コンポーネントの内部要素を置き換えたりするための API が標準化されました。 今までは*Propsなどのプロパティを通して内部要素に干渉する手段などがありましたが、 これらは廃止され、slotsとslotPropsプロパティを使用するようになっています。以前の方法に比べ、より細かい制御が可能なことに加え、手段の一貫性が向上しています。

https://mui.com/material-ui/customization/overriding-component-structure/

tsx
// ルートスロットの指定
// ルート（一番外側の要素）の場合はcomponentで指定する
<Button component="a"  href="/" >Link</Button>

// 内部スロットの指定
// 内部の要素の場合はslotsで指定する
<Autocomplete
  slots={{
    popper: PopperComponent,
  }}
/>

// スロットに渡すpropsの指定
<Autocomplete slotProps={{
  // 対応した内部スロットの要素に指定されたpropsが渡される
  popper: { 'data-testid': 'my-popper' }
  // ルートスロットに渡す場合はrootに指定する
  root: { id: 'badge1' }
 }} />

#CSS レイヤーのサポート

Material UI のスタイルを CSS レイヤーでラップできるようになり、Tailwind CSS v4 などのモダンツールとの統合が可能になりました。

tsx
// Next.js App RouterでのCSSレイヤーの有効化例
// app/layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import GlobalStyles from "@mui/material/GlobalStyles";

export default function RootLayout(props) {
  const { children } = props;
  return (
    <html lang="en">
      <body className={roboto.variable}>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
          <ThemeProvider theme={theme}>{children}</ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}
編集