如何在Material UI的sx属性中使用默认主题的primary、secondary等颜色

Material UI v5 的 sx 属性原生支持你要的写法，无需修改任何主题配置，直接用即可：

基础用法 #

对于颜色相关属性（color、backgroundColor/bgcolor、borderColor等），直接传入primary、secondary这类主题色键名，底层会自动匹配对应色板的main值：

// 完全符合你要求的写法，原生支持
<Box sx={{ backgroundColor: "primary" }}>测试内容</Box>

// 等价于显式指定主色变体的写法
<Box sx={{ backgroundColor: "primary.main" }}>测试内容</Box>

如果需要调用同色系其他亮度变体，加对应后缀即可：

• 浅色变体：primary.light
• 深色变体：primary.dark
• 对应对比度文本色：primary.contrastText

不生效的排查 #

如果写法不生效，按以下步骤检查：

• 确认使用的是 MUI v5及以上版本，v4及更早版本无该简写支持
• 确认根组件外层已经套了官方的ThemeProvider，默认主题自带完整的primary、secondary色板配置，未修改主题的情况下不会缺失
• 非颜色类属性（如boxShadow、border）不会自动触发颜色映射，这类场景可以用 sx 回调手动取主题值：

<Box sx={{ boxShadow: (theme) => `0 2px 10px ${theme.palette.primary.main}` }}></Box>

内容的提问来源于stack exchange，提问作者selby