返回部落格週三，2025年3月26日

Material UI v7 現已推出 🚀

Aarón García

Brijesh Bittu

Diego Andai

Jan Potoms

Marija Najdova

Siriwat Kunaporn

Material UI v7 現在已穩定發布。此主要版本改進了與現代工具的整合，以及整個函式庫的一致性。它被設計為可以直接升級。

改進的 ESM 支援

套件佈局已更新，現在透過 package.json 中的 exports 欄位，明確地同時支援有效的 ESM 和 CommonJS。此更新修正了與 Vite 和 webpack 等熱門打包工具的幾個問題，並使從 Node.js 下的 ES 模組載入 MUI 套件成為可能。

完成插槽模式實作

用於替換或修改元件內部元素的 API 現在已標準化，並且所有相關元件都使用 slots 和 slotProps props 以獲得更大的彈性和一致性。關於此模式的指南已新增至文件中。

選擇性支援 CSS 圖層

Material UI 樣式可以包裝在透過選擇性設定 enableCssLayer 命名的 CSS 圖層中。這允許 Material UI 與依賴 CSS 圖層的現代工具（如 Tailwind CSS v4）整合。此功能已向後移植，現在也適用於 Material UI v6。

此功能目前在 Next.js App Router 和 Vite 等用戶端框架中受到支援。以下是如何根據您的設定啟用 CSS 圖層的範例

// App Router only, support for Pages Router is coming soon

// 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>
  );
}

Tailwind CSS v4 整合的詳細指南即將推出。

移除已棄用的 API

已移除在 v5 中已棄用的 API。這減少了 API 介面，使文件更易於瀏覽。請造訪升級指南，以取得已移除 API 的清單。

開始使用

前往v7 升級指南並立即升級。