Material-UI 5中ListSubheader等组件的sx属性未转换为类名问题

看起来你遇到的是典型的MUI组件样式系统集成问题——Box属于@mui/system体系，sx属性能被自动处理，但像ListSubheader这类Material组件如果配置或导入不当，就会出现sx属性直接被渲染成字符串[object Object]的情况。下面是按优先级排列的解决方案，你可以逐一排查：

1. 检查组件导入路径 #

确保你是从MUI 5的正确包路径导入ListSubheader，避免混用MUI 4的旧包：

// 正确的MUI 5导入方式
import ListSubheader from '@mui/material/ListSubheader';

// 错误的MUI 4导入方式（会导致样式系统不兼容）
// import ListSubheader from '@material-ui/core/ListSubheader';

如果项目中同时存在@material-ui/core和@mui/material两个包，极易引发这类冲突，建议完全迁移到MUI 5的包体系。

2. 确认依赖安装完整 #

MUI 5的sx属性依赖Emotion样式引擎，确保你的项目安装了所有必要的依赖：

# npm 用户
npm install @mui/material @mui/system @emotion/react @emotion/styled

# yarn 用户
yarn add @mui/material @mui/system @emotion/react @emotion/styled

CRA的MUI模板可能默认未装全这些依赖，补装后重启开发服务器试试。

3. 清除CRA缓存 #

有时候Create React App的缓存会导致样式系统出现异常行为，尝试重置缓存后重启：

npm start --reset-cache

如果问题依旧，可以删除node_modules、package-lock.json（或yarn.lock），重新执行npm install（或yarn install）。

4. 检查自定义Babel配置（仅当你eject或修改过配置时） #

如果你自定义了Babel配置，需要确保@emotion/babel-plugin已启用，它负责将sx属性转换为对应的样式类：

// babel.config.json 或 .babelrc
{
  "plugins": ["@emotion/babel-plugin"]
}

默认情况下CRA会自动处理这个配置，但如果你用了customize-cra等工具修改过配置，可能需要手动添加。

正确使用示例 #

这里提供一个可正常运行的ListSubheader使用示例，你可以对比自己的代码：

import List from '@mui/material/List';
import ListSubheader from '@mui/material/ListSubheader';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

export default function ManagedList() {
  return (
    <List sx={{ width: '100%', maxWidth: 360 }}>
      <ListSubheader
        disableGutters
        disableSticky
        sx={{
          color: 'text.primary',
          fontSize: '0.75rem',
          lineHeight: 2.5,
          fontWeight: 700,
          textTransform: 'uppercase',
        }}
      >
        Manage
      </ListSubheader>
      <ListItem>
        <ListItemText primary="Account Settings" />
      </ListItem>
      <ListItem>
        <ListItemText primary="Privacy Controls" />
      </ListItem>
    </List>
  );
}

按照上面的步骤排查，大部分情况下都能解决sx属性失效的问题。如果还是不行，可以检查是否有其他样式库（比如styled-components）和MUI的样式引擎冲突，这时候需要配置MUI使用对应的样式适配器。

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