如何在MUI5中通过Emotion/styled用样式表的className设置Dialog样式

问题核心原因 #

你遇到的问题主要出在两个点：

• PaperProps语法错误：你写成了className="paper"，JSX中对象属性必须用key: value格式，正确写法是className: "paper"
• 样式未命中目标元素：Dialog的可视容器是内部的Paper组件，直接给Dialog加dialog类设置背景色不会生效，样式需要作用在Paper上

修复方案及代码示例 #

1. 修正样式表（Styles.js）

补充Paper组件对应的样式规则，调整目标元素的选择：

import { styled } from "@mui/material";

const Styles = styled("div")(({ theme }) => ({
  // 给DialogTitle设置文字颜色
  "& .title": {
    color: "yellow",
  },
  // 给Dialog的Paper容器设置背景色
  "& .paper": {
    backgroundColor: "green",
  },
}));

export { Styles };

2. 修正Dialog组件的PaperProps语法

<Styles>
  <div>       
    {dialogOpen ? (
      <Dialog
        onClose={() => setDialogOpen(false)}
        open={dialogOpen}
        PaperProps={{
          className: "paper" // 修正为对象键值对格式
        }}
      >
        <DialogTitle className="title">TITLE</DialogTitle>
      </Dialog>
    ) : null}
  </div>
</Styles>

额外说明 #

• MUI Dialog本身仅作为逻辑容器，实际弹窗的视觉区域由内部的Paper组件渲染，所以背景色、边框等样式需要作用在Paper上
• 如果自定义类的样式优先级不足，可以结合MUI全局类名增强权重，比如& .MuiDialog-paper.paper
• 内联样式生效是因为其优先级高于外部样式表，而通过styled组件的嵌套选择器可以确保样式正确命中目标元素

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