MUI System 深入指南用 sx prop 与 CSS 工具函数高效构建自定义界面【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本指南围绕仓库material-ui中的mui/systemMUI System包展开。MUI System 是一套用于快速搭建自定义布局与样式的 CSS 工具集其核心是sxprop 与一组可复用的主题感知样式函数。阅读本文后你将掌握 MUI System 的安装方式、sxprop 的完整语法含主题映射、响应式断点、容器查询与回调值了解其底层模块结构并能在 Material UI 组件、Box以及你自己的自定义组件中直接落地使用。MUI System 是什么面向设计令牌的 CSS 工具集官方 README 对它的定义非常凝练MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.即一套帮助你更高效构建自定义设计的 CSS 工具。在仓库内它由两个层次构成见 packages/mui-system/README.md 与 docs/data/system/getting-started/overview/overview.md一组通用的薄封装组件Box、Container、Grid、Stack它们可以通过sxprop 被快速定制一批 CSS 工具函数style functions覆盖 palette、spacing、flexbox、grid、borders、shadows、typography、sizing、positions、display 等分类把 CSS 属性映射到主题中的设计令牌。MUI System 并不独立于 Material UI 存在它被 Material UI 等库在内部大量使用overview.md 明确说明 Its used internally by libraries like Material UI相当于一套可单独发布的、与组件库解耦的样式基础设施。仓库 packages/mui-system/src/index.js 的导出面也能印证这一点它一方面导出Box、Container、Grid、Stack等布局组件另一方面导出palette、spacing、flexbox、borders、shadows、sizing、typography、positions、cssGrid、compose、breakpoints等样式/工具函数以及styled、createStyled、createTheme、useTheme、useThemeProps、ThemeProvider、GlobalStyles、useMediaQuery、colorManipulator颜色处理工具与整套 CSS 变量相关能力unstable_createCssVarsProvider等。也就是说mui/system是一个主题 样式函数 少量布局组件的自洽包这也是它能独立被npm install使用的前提。安装 mui/system在项目目录中执行以下命令安装主包及其 Emotion 依赖npm install mui/system emotion/react emotion/styled从当前仓库 packages/mui-system/package.json 可以看到依赖约束的细节peerDependenciesreact支持^17.0.0 || ^18.0.0 || ^19.0.0emotion/react需要^11.5.0、emotion/styled需要^11.3.0types/react覆盖 17/18/19emotion/react、emotion/styled与types/react在peerDependenciesMeta中都被标记为optional这意味如果你只在别处消费编译好的产物、不直接使用 Emotion API某些场景下可以按需取舍文档同时指出 MUI System 同时兼容 Emotion 与 styled-components 两条渲染路径运行时依赖仅包含babel/runtime、mui/private-theming、mui/styled-engine、mui/types、mui/utils、clsx、csstype、prop-types等package.json自身重量集中在 Emotion 之上的一层映射逻辑。若你的项目已经使用 Material UI则无需为sx能力额外安装mui/system——组件库会将其作为内部依赖打包此时Box、sx等能力零额外成本可用见 usage.md。在仓库 monorepopnpm workspace内开发时也可以直接在packages/mui-system目录下运行其脚本验证功能例如执行pnpm --workspace-root test:unit --project *:mui/system运行该包单测或用pnpm --filter mui/system build触发构建。为什么用 MUI Systemsx prop 对比 styled-componentsMUI System 最核心的价值是通过sxprop 让你把样式写在组件内部从而省掉大量仅为一次性使用而创建的 styled-component 定义。官方文档给出了一个高度可读的对比docs/data/system/getting-started/usage/usage.mdstyled-components 方式为了渲染一个会话统计卡片需要为外层容器、标题、数值、图标、差值等逐一编写styled(div)/styled(Icon)常量代码膨胀且需要在定义处与使用处之间来回跳转MUI System 方式用单个Box加sx内联对象即可且键值直接引用主题令牌Box sx{{ bgcolor: background.paper, boxShadow: 1, // 对应 theme.shadows[1] borderRadius: 1, // 对应 1 * theme.shape.borderRadius p: 2, // 对应 theme.spacing(2) minWidth: 300, }} Box sx{{ color: text.secondary }}Sessions/Box Box sx{{ color: text.primary, fontSize: 34, fontWeight: medium }} 98.3 K /Box Box component{TrendingUpIcon} sx{{ color: success.dark, fontSize: 16, verticalAlign: sub }} / Box sx{{ color: success.dark, display: inline, fontWeight: medium, mx: 0.5 }} 18.77% /Box Box sx{{ color: text.secondary, display: inline, fontSize: 12 }} vs. last week /Box /Box两者对比如下表所示维度styled-componentsMUI System代码量需为每个样式单元新建具名组件样式内联在sx中随用随写命名负担需为组件起名无额外命名上下文切换定义处与使用处分离样式与 JSX 同处一处主题令牌访问通过({ theme }) ...取值键名直接映射主题如primary.main、shadows[1]适用场景需要跨多种上下文复用的复杂组件一次性、紧贴业务的一对一样式需要特别注意的是什么时候用哪套是有明确边界的sx适合给一次性定制的组件打样式而如果你在构建一个会被应用多处、支持多种 props 组合的通用组件则应回到 styled-components API详见 usage.md。sx prop 是 CSS 超集 主题映射器sxprop 是整个 MUI System 的统一入口。它提供的是CSS 超集——既包含全部 CSS 属性与选择器又增加了若干主题感知的映射规则usage.md。下面是各类主题感知属性的逐类速查均可在仓库的 style-utility 文档与源码中得到印证Borders源码位置Box sx{{ border: 1 }} / // → border: 1px solid black Box sx{{ borderColor: primary.main }} / // → theme.palette.primary.main Box sx{{ borderRadius: 2 }} / // → 2 * theme.shape.borderRadius默认 4pxDisplay源码位置Box sx{{ displayPrint: none }} / // → media print: { display: none }间距类映射Grid 与 SpacingCSS Grid 的gap、rowGap、columnGap以及margin/padding等间距属性数值都会被theme.spacing放大默认 1 8pxBox sx{{ gap: 2 }} / // → theme.spacing(2) Box sx{{ margin: 2 }} / // → theme.spacing(2)间距属性提供完整的方向缩写见 the-sx-prop.mdPropCSS propertyPropCSS propertymmarginppaddingmtmargin-topptpadding-topmrmargin-rightprpadding-rightmbmargin-bottompbpadding-bottommlmargin-leftplpadding-leftmxmargin-left,margin-rightpxpadding-left,padding-rightmymargin-top,margin-bottompypadding-top,padding-bottomPalette源码位置Box sx{{ color: primary.main }} / // → theme.palette.primary.main Box sx{{ bgcolor: primary.main }} / // → backgroundColor 的别名Positions 与 Shadows源码、源码Box sx{{ zIndex: tooltip }} / // → theme.zIndex.tooltip Box sx{{ boxShadow: 1 }} / // → theme.shadows[1]Sizing源码位置width、height、minWidth、maxWidth、minHeight、maxHeight使用统一变换值落在(0, 1]区间时转为百分比否则直接作为像素值写入Box sx{{ width: 1 / 2 }} / // → width: 50% Box sx{{ width: 20 }} / // → width: 20pxTypography源码位置Box sx{{ fontWeight: fontWeightLight }} / // → theme.typography.fontWeightLight Box sx{{ fontWeight: light }} / // 省略前缀亦可 Box sx{{ typography: body1 }} / // → { ...theme.typography.body1 }sx 仍是完整 CSS除主题感知属性外sx完整支持伪类、媒体查询与嵌套选择器usage.mdBox sx{{ :hover: { boxShadow: 6 }, // 伪选择器 media print: { width: 300 }, // 媒体查询 .ChildSelector: { bgcolor: primary.main }, // 嵌套选择器 }} /这些主题映射之所以成立从源码上可追溯样式函数按CSS 属性 → 主题键的关系表生成转换器再经 compose 组合成更大的函数集最终由 styleFunctionSx.js 统一执行值解析与断点遍历并配合默认配置 defaultSxConfig.ts。因此sx的行为是所有 style functions 的组合结果而不是某个硬编码特例。响应式设计断点对象、断点数组与容器查询sxprop 最重要的能力之一是用极简语法表达响应式值usage.md。断点对象推荐以主题断点名为键某一断点的取值会作用于所有更大的断点Box sx{{ width: { lg: 100 } }} / // 等价于 theme.breakpoints.up(lg)容器查询简写v6 起支持从 v6 开始对象结构支持以开头的容器查询简写{breakpoint}/{container}breakpoint可为 px 数值、默认断点键sm/md/lg/xl或合法 CSS 值如40emcontainer可选containment context 的名称。使用前建议先确认目标浏览器对 CSS 容器查询的支持情况。断点数组从小到大排列成数组即可。数组方案仅在断点数量很少例如 3 个时推荐断点一多应改用对象写法可用null跳过某档Box sx{{ width: [null, null, 300] }}This box has a responsive width./Box自定义断点可以完全替换默认断点体系然后用自定义键书写响应式对象import Box from mui/material/Box; import { createTheme, ThemeProvider } from mui/material/styles; const theme createTheme({ breakpoints: { values: { mobile: 0, tablet: 640, laptop: 1024, desktop: 1280 }, }, }); export default function App() { return ( ThemeProvider theme{theme} Box sx{{ width: { mobile: 100, laptop: 300 } }} This box has a responsive width /Box /ThemeProvider ); }使用 TypeScript 时需要模块扩充让主题接受新断点键declare module mui/material/styles { interface BreakpointOverrides { xs: false; sm: false; md: false; lg: false; xl: false; // 移除默认断点 tablet: true; laptop: true; desktop: true; // 新增断点 } }在底层mui/system将handleBreakpoints、mergeBreakpointsInOrder、resolveBreakpointValues以unstable_resolveBreakpointValues导出等断点处理逻辑集中在 breakpoints 模块这正是sx能把对象/数组摊平成多层媒体查询的原理所在。回调值直接访问 theme对于 MUI System 原生不认识的 CSS 属性或需要从主题取复杂对象的场景可以把整个值写成接收theme的回调函数Box sx{(theme) ({ ...theme.typography.body, color: theme.palette.primary.main, })} /注意属性级回调写法已弃用sx{{ height: (theme) theme.spacing(10) }}这种把回调放在单个值上的形式官方建议把回调提升为整个sx值的函数存量代码可用 codemod 一次性迁移npx mui/codemodlatest v6.0.0/sx-prop path/to/file-or-folderTypeScript 下若要访问自定义主题字段请用模块扩充扩展Themedeclare module mui/system { interface Theme { status: { warning: string }; } } const theme createTheme({ status: { warning: orange[500] }, }); // Box sx{(theme) ({ bgcolor: theme.status.warning })}Example/Box数组值、动态值与 TypeScript 的坑sx值还支持数组数组靠后的元素具备更高优先级适合做条件覆盖Box sx{[ { :hover: { color: red, backgroundColor: white } }, foo { :hover: { backgroundColor: grey } }, bar { :hover: { backgroundColor: yellow } }, ]} /hover 时color: red; background: white;始终生效foo为真时背景变为grey若bar为真则背景以yellow覆盖前面的值数组下标越大覆盖能力越强。数组的每一项都可以是对象或回调函数。对于高频变化的动态值如取色器的实时预览应优先使用行内 CSS 变量而非每次渲染都传入变化对象——后者会不断向 DOM 插入 style 标签带来潜在性能问题。TypeScript 方面最常见的问题是字面量类型被拓宽把样式对象先定义为变量再传入时flexDirection会被推断为string而非column从而与SxPropsTheme冲突。两种解法任选其一const style { flexDirection: column } as const; // 方案一as const // 方案二直接把对象内联到 sx 上 // Button sx{{ flexDirection: column }}Example/Button在四个位置使用 sxsxprop 并非只属于 MUI System 组件它有四处落点usage.md核心组件所有 Material UI 组件Button、TextField、Table…都原生支持sxpropBox本身就是一个极薄封装默认渲染div专门用来暴露sx既是工具组件也可以作为其他组件的包装层自定义组件通过mui/material/styles的styled创建自定义组件后就能在自定义组件上接收sximport { styled } from mui/material/styles; const Div styled(div);若要在自定义组件中继续把sx向下传递把sx从 props 里取出并透传给内部 MUI 组件即可。关于Box的实现细节可查阅 Box.tsx 及其可配置工厂 createBoxcreateBox允许你基于自定义主题、通过styled生成指定样式引擎的 Box 版本。开箱即用的布局组件Grid、Stack、Container除Box外mui/system还直接导出了三套布局组件见 index.jsGridCSS Grid 布局组件内部包含 gridGenerator.ts 负责断点 → 轨道/间距的计算可通过size等 props 声明式布局Stack基于 flexbox 的一维布局容器适合处理纵向/横向堆叠并提供 createStack 工厂供二次定制Container约束内容最大宽度的居中容器。它们与Box一样通过sx接受样式定制同时各自暴露结构化的布局 props。若脱离mui/system、直接在 Material UI 中使用这些组件你使用的是同一套实现Material UI 内会从mui/system再导出。性能与工程权衡来自官方文档与仓库源码MUI System 本质上是 CSS-in-JS可同时运行在 Emotion 与 styled-components 之上。官方文档对其利弊有非常坦率的说明usage.md优点sx是 CSS 超集会 CSS 就能快速上手可选缩写如m/p、bgcolor熟悉后能显著提速具备auto-purge只会把页面真正用到的 CSS 发给客户端初始体积成本固定新增 CSS 属性不会让包继续变大——若你已在用 Material UI几乎零额外开销文档给出的参考数字为mui/system加emotion/react合计约 15 kB gzipped。缺点存在运行时runtime开销。文档给出一组基准渲染 1000 个元素时间已归一化原生div className为 100ms、无样式的组件为 112ms、styled 组件为 181ms、Box sx{…}为 296ms当性能成为瓶颈时有简单对策例如渲染超长列表时外层用一次性的sx注入内部条目改用纯 CSS 子选择器把样式注入点收敛到单点。因此判断要不要为某个组件引入sx本质上是在开发效率 / 代码内聚与运行时成本之间做取舍。对绝大多数业务 UI 而言其成本可接受但大规模列表、动画热路径等敏感场景应审慎使用。总结MUI System 以mui/system单包发布由一条主线贯穿sxpropCSS 超集 主题映射解决样式写在哪、怎么写的问题响应式对象 / 数组与容器查询简写解决样式何时生效的问题回调值与 TypeScript 模块扩充解决如何安全访问自定义主题的问题Box/Grid/Stack/Container提供可直接投入使用的布局外壳底层 style functions 断点工具 样式引擎适配是这一切能力的源码实现基础。希望进一步钻研的读者可直接从以下仓库路径继续深入官方速览与完整使用教程见 docs/data/system/getting-started/overview/overview.md 与 usage.mdsx全部主题感知属性的权威清单见 the-sx-prop.mddocs/data/system/目录下的 borders、spacing、palette、shadows、typography、sizing、flexbox 等子目录则分别对应各类 style utilities 的专项文档而 packages/mui-system/src 目录则提供了从样式函数到运行时求值器styleFunctionSx的全部实现可作为阅读源码的第一站。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
MUI System 深入指南用 sx prop 与 CSS 工具函数高效构建自定义界面【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本指南围绕仓库material-ui中的mui/systemMUI System包展开。MUI System 是一套用于快速搭建自定义布局与样式的 CSS 工具集其核心是sxprop 与一组可复用的主题感知样式函数。阅读本文后你将掌握 MUI System 的安装方式、sxprop 的完整语法含主题映射、响应式断点、容器查询与回调值了解其底层模块结构并能在 Material UI 组件、Box以及你自己的自定义组件中直接落地使用。MUI System 是什么面向设计令牌的 CSS 工具集官方 README 对它的定义非常凝练MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.即一套帮助你更高效构建自定义设计的 CSS 工具。在仓库内它由两个层次构成见 packages/mui-system/README.md 与 docs/data/system/getting-started/overview/overview.md一组通用的薄封装组件Box、Container、Grid、Stack它们可以通过sxprop 被快速定制一批 CSS 工具函数style functions覆盖 palette、spacing、flexbox、grid、borders、shadows、typography、sizing、positions、display 等分类把 CSS 属性映射到主题中的设计令牌。MUI System 并不独立于 Material UI 存在它被 Material UI 等库在内部大量使用overview.md 明确说明 Its used internally by libraries like Material UI相当于一套可单独发布的、与组件库解耦的样式基础设施。仓库 packages/mui-system/src/index.js 的导出面也能印证这一点它一方面导出Box、Container、Grid、Stack等布局组件另一方面导出palette、spacing、flexbox、borders、shadows、sizing、typography、positions、cssGrid、compose、breakpoints等样式/工具函数以及styled、createStyled、createTheme、useTheme、useThemeProps、ThemeProvider、GlobalStyles、useMediaQuery、colorManipulator颜色处理工具与整套 CSS 变量相关能力unstable_createCssVarsProvider等。也就是说mui/system是一个主题 样式函数 少量布局组件的自洽包这也是它能独立被npm install使用的前提。安装 mui/system在项目目录中执行以下命令安装主包及其 Emotion 依赖npm install mui/system emotion/react emotion/styled从当前仓库 packages/mui-system/package.json 可以看到依赖约束的细节peerDependenciesreact支持^17.0.0 || ^18.0.0 || ^19.0.0emotion/react需要^11.5.0、emotion/styled需要^11.3.0types/react覆盖 17/18/19emotion/react、emotion/styled与types/react在peerDependenciesMeta中都被标记为optional这意味如果你只在别处消费编译好的产物、不直接使用 Emotion API某些场景下可以按需取舍文档同时指出 MUI System 同时兼容 Emotion 与 styled-components 两条渲染路径运行时依赖仅包含babel/runtime、mui/private-theming、mui/styled-engine、mui/types、mui/utils、clsx、csstype、prop-types等package.json自身重量集中在 Emotion 之上的一层映射逻辑。若你的项目已经使用 Material UI则无需为sx能力额外安装mui/system——组件库会将其作为内部依赖打包此时Box、sx等能力零额外成本可用见 usage.md。在仓库 monorepopnpm workspace内开发时也可以直接在packages/mui-system目录下运行其脚本验证功能例如执行pnpm --workspace-root test:unit --project *:mui/system运行该包单测或用pnpm --filter mui/system build触发构建。为什么用 MUI Systemsx prop 对比 styled-componentsMUI System 最核心的价值是通过sxprop 让你把样式写在组件内部从而省掉大量仅为一次性使用而创建的 styled-component 定义。官方文档给出了一个高度可读的对比docs/data/system/getting-started/usage/usage.mdstyled-components 方式为了渲染一个会话统计卡片需要为外层容器、标题、数值、图标、差值等逐一编写styled(div)/styled(Icon)常量代码膨胀且需要在定义处与使用处之间来回跳转MUI System 方式用单个Box加sx内联对象即可且键值直接引用主题令牌Box sx{{ bgcolor: background.paper, boxShadow: 1, // 对应 theme.shadows[1] borderRadius: 1, // 对应 1 * theme.shape.borderRadius p: 2, // 对应 theme.spacing(2) minWidth: 300, }} Box sx{{ color: text.secondary }}Sessions/Box Box sx{{ color: text.primary, fontSize: 34, fontWeight: medium }} 98.3 K /Box Box component{TrendingUpIcon} sx{{ color: success.dark, fontSize: 16, verticalAlign: sub }} / Box sx{{ color: success.dark, display: inline, fontWeight: medium, mx: 0.5 }} 18.77% /Box Box sx{{ color: text.secondary, display: inline, fontSize: 12 }} vs. last week /Box /Box两者对比如下表所示维度styled-componentsMUI System代码量需为每个样式单元新建具名组件样式内联在sx中随用随写命名负担需为组件起名无额外命名上下文切换定义处与使用处分离样式与 JSX 同处一处主题令牌访问通过({ theme }) ...取值键名直接映射主题如primary.main、shadows[1]适用场景需要跨多种上下文复用的复杂组件一次性、紧贴业务的一对一样式需要特别注意的是什么时候用哪套是有明确边界的sx适合给一次性定制的组件打样式而如果你在构建一个会被应用多处、支持多种 props 组合的通用组件则应回到 styled-components API详见 usage.md。sx prop 是 CSS 超集 主题映射器sxprop 是整个 MUI System 的统一入口。它提供的是CSS 超集——既包含全部 CSS 属性与选择器又增加了若干主题感知的映射规则usage.md。下面是各类主题感知属性的逐类速查均可在仓库的 style-utility 文档与源码中得到印证Borders源码位置Box sx{{ border: 1 }} / // → border: 1px solid black Box sx{{ borderColor: primary.main }} / // → theme.palette.primary.main Box sx{{ borderRadius: 2 }} / // → 2 * theme.shape.borderRadius默认 4pxDisplay源码位置Box sx{{ displayPrint: none }} / // → media print: { display: none }间距类映射Grid 与 SpacingCSS Grid 的gap、rowGap、columnGap以及margin/padding等间距属性数值都会被theme.spacing放大默认 1 8pxBox sx{{ gap: 2 }} / // → theme.spacing(2) Box sx{{ margin: 2 }} / // → theme.spacing(2)间距属性提供完整的方向缩写见 the-sx-prop.mdPropCSS propertyPropCSS propertymmarginppaddingmtmargin-topptpadding-topmrmargin-rightprpadding-rightmbmargin-bottompbpadding-bottommlmargin-leftplpadding-leftmxmargin-left,margin-rightpxpadding-left,padding-rightmymargin-top,margin-bottompypadding-top,padding-bottomPalette源码位置Box sx{{ color: primary.main }} / // → theme.palette.primary.main Box sx{{ bgcolor: primary.main }} / // → backgroundColor 的别名Positions 与 Shadows源码、源码Box sx{{ zIndex: tooltip }} / // → theme.zIndex.tooltip Box sx{{ boxShadow: 1 }} / // → theme.shadows[1]Sizing源码位置width、height、minWidth、maxWidth、minHeight、maxHeight使用统一变换值落在(0, 1]区间时转为百分比否则直接作为像素值写入Box sx{{ width: 1 / 2 }} / // → width: 50% Box sx{{ width: 20 }} / // → width: 20pxTypography源码位置Box sx{{ fontWeight: fontWeightLight }} / // → theme.typography.fontWeightLight Box sx{{ fontWeight: light }} / // 省略前缀亦可 Box sx{{ typography: body1 }} / // → { ...theme.typography.body1 }sx 仍是完整 CSS除主题感知属性外sx完整支持伪类、媒体查询与嵌套选择器usage.mdBox sx{{ :hover: { boxShadow: 6 }, // 伪选择器 media print: { width: 300 }, // 媒体查询 .ChildSelector: { bgcolor: primary.main }, // 嵌套选择器 }} /这些主题映射之所以成立从源码上可追溯样式函数按CSS 属性 → 主题键的关系表生成转换器再经 compose 组合成更大的函数集最终由 styleFunctionSx.js 统一执行值解析与断点遍历并配合默认配置 defaultSxConfig.ts。因此sx的行为是所有 style functions 的组合结果而不是某个硬编码特例。响应式设计断点对象、断点数组与容器查询sxprop 最重要的能力之一是用极简语法表达响应式值usage.md。断点对象推荐以主题断点名为键某一断点的取值会作用于所有更大的断点Box sx{{ width: { lg: 100 } }} / // 等价于 theme.breakpoints.up(lg)容器查询简写v6 起支持从 v6 开始对象结构支持以开头的容器查询简写{breakpoint}/{container}breakpoint可为 px 数值、默认断点键sm/md/lg/xl或合法 CSS 值如40emcontainer可选containment context 的名称。使用前建议先确认目标浏览器对 CSS 容器查询的支持情况。断点数组从小到大排列成数组即可。数组方案仅在断点数量很少例如 3 个时推荐断点一多应改用对象写法可用null跳过某档Box sx{{ width: [null, null, 300] }}This box has a responsive width./Box自定义断点可以完全替换默认断点体系然后用自定义键书写响应式对象import Box from mui/material/Box; import { createTheme, ThemeProvider } from mui/material/styles; const theme createTheme({ breakpoints: { values: { mobile: 0, tablet: 640, laptop: 1024, desktop: 1280 }, }, }); export default function App() { return ( ThemeProvider theme{theme} Box sx{{ width: { mobile: 100, laptop: 300 } }} This box has a responsive width /Box /ThemeProvider ); }使用 TypeScript 时需要模块扩充让主题接受新断点键declare module mui/material/styles { interface BreakpointOverrides { xs: false; sm: false; md: false; lg: false; xl: false; // 移除默认断点 tablet: true; laptop: true; desktop: true; // 新增断点 } }在底层mui/system将handleBreakpoints、mergeBreakpointsInOrder、resolveBreakpointValues以unstable_resolveBreakpointValues导出等断点处理逻辑集中在 breakpoints 模块这正是sx能把对象/数组摊平成多层媒体查询的原理所在。回调值直接访问 theme对于 MUI System 原生不认识的 CSS 属性或需要从主题取复杂对象的场景可以把整个值写成接收theme的回调函数Box sx{(theme) ({ ...theme.typography.body, color: theme.palette.primary.main, })} /注意属性级回调写法已弃用sx{{ height: (theme) theme.spacing(10) }}这种把回调放在单个值上的形式官方建议把回调提升为整个sx值的函数存量代码可用 codemod 一次性迁移npx mui/codemodlatest v6.0.0/sx-prop path/to/file-or-folderTypeScript 下若要访问自定义主题字段请用模块扩充扩展Themedeclare module mui/system { interface Theme { status: { warning: string }; } } const theme createTheme({ status: { warning: orange[500] }, }); // Box sx{(theme) ({ bgcolor: theme.status.warning })}Example/Box数组值、动态值与 TypeScript 的坑sx值还支持数组数组靠后的元素具备更高优先级适合做条件覆盖Box sx{[ { :hover: { color: red, backgroundColor: white } }, foo { :hover: { backgroundColor: grey } }, bar { :hover: { backgroundColor: yellow } }, ]} /hover 时color: red; background: white;始终生效foo为真时背景变为grey若bar为真则背景以yellow覆盖前面的值数组下标越大覆盖能力越强。数组的每一项都可以是对象或回调函数。对于高频变化的动态值如取色器的实时预览应优先使用行内 CSS 变量而非每次渲染都传入变化对象——后者会不断向 DOM 插入 style 标签带来潜在性能问题。TypeScript 方面最常见的问题是字面量类型被拓宽把样式对象先定义为变量再传入时flexDirection会被推断为string而非column从而与SxPropsTheme冲突。两种解法任选其一const style { flexDirection: column } as const; // 方案一as const // 方案二直接把对象内联到 sx 上 // Button sx{{ flexDirection: column }}Example/Button在四个位置使用 sxsxprop 并非只属于 MUI System 组件它有四处落点usage.md核心组件所有 Material UI 组件Button、TextField、Table…都原生支持sxpropBox本身就是一个极薄封装默认渲染div专门用来暴露sx既是工具组件也可以作为其他组件的包装层自定义组件通过mui/material/styles的styled创建自定义组件后就能在自定义组件上接收sximport { styled } from mui/material/styles; const Div styled(div);若要在自定义组件中继续把sx向下传递把sx从 props 里取出并透传给内部 MUI 组件即可。关于Box的实现细节可查阅 Box.tsx 及其可配置工厂 createBoxcreateBox允许你基于自定义主题、通过styled生成指定样式引擎的 Box 版本。开箱即用的布局组件Grid、Stack、Container除Box外mui/system还直接导出了三套布局组件见 index.jsGridCSS Grid 布局组件内部包含 gridGenerator.ts 负责断点 → 轨道/间距的计算可通过size等 props 声明式布局Stack基于 flexbox 的一维布局容器适合处理纵向/横向堆叠并提供 createStack 工厂供二次定制Container约束内容最大宽度的居中容器。它们与Box一样通过sx接受样式定制同时各自暴露结构化的布局 props。若脱离mui/system、直接在 Material UI 中使用这些组件你使用的是同一套实现Material UI 内会从mui/system再导出。性能与工程权衡来自官方文档与仓库源码MUI System 本质上是 CSS-in-JS可同时运行在 Emotion 与 styled-components 之上。官方文档对其利弊有非常坦率的说明usage.md优点sx是 CSS 超集会 CSS 就能快速上手可选缩写如m/p、bgcolor熟悉后能显著提速具备auto-purge只会把页面真正用到的 CSS 发给客户端初始体积成本固定新增 CSS 属性不会让包继续变大——若你已在用 Material UI几乎零额外开销文档给出的参考数字为mui/system加emotion/react合计约 15 kB gzipped。缺点存在运行时runtime开销。文档给出一组基准渲染 1000 个元素时间已归一化原生div className为 100ms、无样式的组件为 112ms、styled 组件为 181ms、Box sx{…}为 296ms当性能成为瓶颈时有简单对策例如渲染超长列表时外层用一次性的sx注入内部条目改用纯 CSS 子选择器把样式注入点收敛到单点。因此判断要不要为某个组件引入sx本质上是在开发效率 / 代码内聚与运行时成本之间做取舍。对绝大多数业务 UI 而言其成本可接受但大规模列表、动画热路径等敏感场景应审慎使用。总结MUI System 以mui/system单包发布由一条主线贯穿sxpropCSS 超集 主题映射解决样式写在哪、怎么写的问题响应式对象 / 数组与容器查询简写解决样式何时生效的问题回调值与 TypeScript 模块扩充解决如何安全访问自定义主题的问题Box/Grid/Stack/Container提供可直接投入使用的布局外壳底层 style functions 断点工具 样式引擎适配是这一切能力的源码实现基础。希望进一步钻研的读者可直接从以下仓库路径继续深入官方速览与完整使用教程见 docs/data/system/getting-started/overview/overview.md 与 usage.mdsx全部主题感知属性的权威清单见 the-sx-prop.mddocs/data/system/目录下的 borders、spacing、palette、shadows、typography、sizing、flexbox 等子目录则分别对应各类 style utilities 的专项文档而 packages/mui-system/src 目录则提供了从样式函数到运行时求值器styleFunctionSx的全部实现可作为阅读源码的第一站。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
