Material UI v6 现已发布 🎉

Material UI v6 现已稳定—正好赶上庆祝 我们首次提交 10 周年！它带来了新功能、改进以及用于静态 CSS 提取的实验性集成。

目录

• 新功能
  • CSS 主题变量
  • 配色方案
  • CSS 媒体 prefers-color-scheme
  • 容器查询
  • 应用样式的新方法
• 改进
  • 优化的运行时性能
  • 改进的免费模板
  • 稳定的 Grid v2
  • 减少的包大小
• 通过 Pigment CSS 进行实验性 CSS 提取
  • React 服务端组件
  • 内置 sx prop 支持
• React 19 支持
• 通过 Toolpad Core 的全栈应用
• 开始使用 Material UI v6

新功能

CSS 主题变量

CSS 变量已成为 Web 行业的标准。Material UI v6 引入了一个新的 cssVariables 标志，该标志从可序列化的主题值（例如调色板、间距和排版）生成 CSS 变量。

const theme = createTheme({ cssVariables: true, ... });

启用该标志后，您可以从 theme.vars 对象中访问变量，其结构与主题相同。

优势

• 改进的开发者体验——您可以在浏览器的开发者工具中看到值的来源。

• 使得解决臭名昭著的 暗黑模式 SSR 闪烁问题 成为可能。

• CSS 变量为集成打开了许多扇门——例如，您可以在纯 CSS 文件中使用 Material UI 主题。

  styles.css

  .custom-card {
    background-color: var(--mui-palette-background-default);
    color: var(--mui-palette-text-primary);
    padding: var(--mui-spacing-2);
    font: var(--mui-font-body1);
  }
  

  复制已复制（或 $keyC）

颜色方案

在 v6 之前，如果您想支持浅色和深色模式，您必须创建两个单独的主题并处理在模式之间切换的逻辑。这可能很复杂且容易出错。

Material UI v6 引入了新的 colorSchemes 节点来简化此过程：只需一行代码，您的应用程序即可立即支持浅色和深色模式。

const theme = createTheme({ colorSchemes: { dark: true } });
// light is generated by default.

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

colorSchemes 节点使 Material UI 能够开箱即用地支持以下功能

• 系统偏好检测
• 使用 disableTransitionOnChange 属性在模式之间即时切换
• 通过本地存储持久保存用户偏好
• 跨浏览器选项卡自动同步所选模式

用于在模式之间切换的 Hook

新的 useColorScheme Hook 让您可以在应用程序中读取和更新模式。

import { useColorScheme } from '@mui/material/styles';

function ModeSwitcher() {
  const { mode, setMode } = useColorScheme();
  if (!mode) return null;
  return (
    <select onChange={(event) => setMode(event.target.value)}>
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  );
}

CSS 媒体 prefers-color-scheme

当 CSS 变量 和 颜色方案 启用后，Material UI 使用 prefers-color-scheme 媒体查询作为生成 CSS 变量的默认方法。

容器查询

Material UI v6 引入了一个基于现有 theme.breakpoints API 的 容器查询 实用程序。

此功能让您可以根据父容器的宽度而不是视口定义样式。

它也适用于 sx 属性

应用样式的新方法

新的 API theme.applyStyles() 已被添加，用于创建特定的模式样式。它旨在替代 theme.palette.mode === 'dark' 条件，以修复与 CSS 主题变量功能结合使用时的 SSR 闪烁问题。

改进

优化的运行时性能

已进行多项优化，以提高 Material UI v6 的运行时性能。

这仅仅是我们性能改进的开始。我们的管道中还有更多优化，敬请关注后续 v6.x 更新和基准测试结果。

改进的免费模板

探索新的和改进的 免费 Material UI 模板，以了解所有 v6 功能的实际应用。我们已全面改进了模板，以演示组件的一些常见实际用例，并为您的下一个项目提供完美的起点。

自定义样式

新的模板可以在默认 Material Design 和整个套件共享的完全自定义主题之间切换，因此您可以深入研究组件自定义的最佳方法——或者只是获取您最喜欢的部分并从那里开始构建。

稳定的 Grid v2

Grid v2 组件已稳定，现在使用 CSS gap 属性在网格项之间创建空间。与之前使用边距和内边距创建空间的版本相比，这是一个巨大的改进。

响应式配置已整合到 size 和 offset 属性中，以保持一致性。

import Grid from '@mui/material/Grid2';

<Grid container>
  <Grid size={{ xs: 6, sm: 4, lg: 3 }} />
  <Grid size={{ xs: 6, sm: 4, lg: 3 }} />
  <Grid size={{ xs: 6, sm: 4, lg: 3 }} />
</Grid>;

减少的包大小

为了与 React 19 删除 UMD 构建保持一致，Material UI 也移除了其 UMD 包。这使得 @mui/material 包大小减少了 2.5MB，或 v5 总大小的 25%。有关更多详细信息，请参阅 Package Phobia。我们建议使用基于 ESM 的 CDN，例如 esm.sh，而不是 UMD。有关替代安装方法，请参阅 CDN 文档。

通过 Pigment CSS 进行实验性 CSS 提取

Material UI v5 使用 Emotion 作为其默认样式解决方案。由于它是一个运行时 CSS-in-JS 库，Emotion 迫使我们在性能和包大小之间做出妥协。

Material UI v6 引入了与 Pigment CSS 的可选集成，Pigment CSS 是我们新的零运行时样式库，它消除了运行时开销，同时保留了您已经熟悉和喜爱的 API 设计模式。

React Server Components

一旦与 Pigment CSS 集成，Material UI v6 将提供一组单独的布局组件——Grid、Container 和 Stack——它们与 React Server Components 兼容。

import Grid from '@mui/material-pigment-css/Grid';
import Container from '@mui/material-pigment-css/Container';
import Stack from '@mui/material-pigment-css/Stack';

内置 sx 属性支持

通过 Pigment CSS 集成，所有 JSX 元素都开箱即用地支持 sx 属性。这意味着您不再需要用 Box 或 Stack 等包装器来 clutter DOM，以便将自定义样式应用于 <div> 或任何其他带有 sx 属性的元素。

-import Box from '@mui/material/Box';

-<Box component="img" sx={{ padding: 2 }} />
+<img sx={{ padding: 2 }} />

React 19 支持

Material UI v6 已为 React 19 做好准备。我们一直在使用最新的 React 19 RC 版本测试 Material UI，以确保在 React 19 稳定版发布后能够兼容。

我们还在努力将 React 19 支持向后移植到 Material UI v5——敬请关注。

通过 Toolpad Core 构建全栈应用

为了帮助您比以往更快地构建全栈应用，我们正在推出 Toolpad Core，这是一个使用 Material UI 和 Next.js 构建仪表板和内部工具的框架，它预先为您配置了路由、布局组件和身份验证。

敬请关注近期有关 Toolpad Core 的更多更新。

开始使用 Material UI v6

准备好升级到 Material UI v6 了吗？接下来请访问 v6 迁移指南。

访问以下链接以获取此处涵盖的一些关键功能的更多详细信息

• Pigment CSS 集成
• 容器查询
• CSS 主题变量
• 稳定的 Grid v2
• 免费模板