返回博客Wednesday, Mar 26, 2025

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 属性以获得更高的灵活性和一致性。文档中已添加了关于此模式的指南。

选择启用对 CSS layers 的支持

Material UI 样式可以包裹在通过选择启用配置 enableCssLayer 命名的 CSS layer 中。这使得 Material UI 可以与依赖 CSS layers 的现代工具（如 Tailwind CSS v4）集成。此功能已向后移植，现在也可在 Material UI v6 中使用。

此功能目前在 Next.js App Router 和 Vite 等客户端框架中受支持。以下是如何根据您的设置启用 CSS layers 的示例

// 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 升级指南并立即升级。