MUI 5中className与sx prop显示[object]而非CSS类名问题求助

问题根因 #

你代码的核心错误是：sx 是MUI专属属性，仅支持在MUI官方提供的组件上使用，不能直接绑定到原生HTML标签上。

具体错误说明 #

• 你给原生<div>绑定了sx属性，浏览器会将sx识别为普通自定义属性，直接把传入的样式对象序列化为[object Object]展示，不会生成对应的CSS类名，样式自然无法生效。
• 你对classes、className属性的使用也不符合规范：classes是MUI v4中配合makeStyles/useStyles生成的类名对象使用的属性，仅支持MUI组件，不能直接传入样式对象；className需要接收字符串格式的类名，直接传样式对象也不会生效。

修复方案 #

最简单的修复方式是将原生<div>替换为MUI提供的Box组件，Box组件原生支持sx属性，同时你可以把所有样式都统一放到sx中维护，不需要混用style等属性：

import * as React from "react";
// 导入MUI的Box组件
import { Box } from "@mui/material";

const styles = {
  myBackground: {
    backgroundColor: "red"
  },
  myBorder: {
    border: "2px solid green"
  },
  myFont: {
    color: "blue"
  }
};

export default function Index() {
  return (
    <Box
      sx={{
        ...styles.myBackground,
        ...styles.myBorder,
        ...styles.myFont,
        maxWidth: "sm"
      }}
    >
      This is a test
    </Box>
  );
}

如果你坚持要使用原生div，也可以用MUI的styled工具包装原生div，使其支持sx属性，或者直接把样式对象传入原生style属性即可。

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