有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名？

Question

mui 与我共事很愉快。似乎“每个人都有自己的方式”进行反应样式和布局。作为图书馆开发人员，管理这种灵活性的任务一定是巨大的。

自定义 mui 的“我的方式”是使用全局主题。所以我创建了 class 个名称来添加 MuiContainer。我依赖于 overrides 中的选择器，现在是特定于 mui 组件的 styleOverrides prop.

由于以下原因，我的选择器无法正常工作：

// v4 class names
.MuiContainer-root

// v5 class names
.css-1oqqzyl-MuiContainer-root

有没有办法让主题引擎以相同的方式呈现 class 名称？例如，这是 mui 依赖 emotion 的证据吗？

顺便说一句，当在 v4 中呈现时，class 名称包括我的自定义 classes:

.MuiContainer-root.Luci-AppLayout.root

根据附录，在 v5 中，给定元素有 3 组 class 名称：

没有前缀的mui
带前缀的 mui（v4 中不存在）
我的习惯class是“原样”

只有带前缀的mui出现在“检查”中window；即，显示实际呈现的 classes 以设置元素的样式。

附录

根据 @Ryan Cogswell 的评论，class 名称的两个版本在 html 中呈现。但是，在开发工具的检查 window 中，用于设置元素样式的 class 的唯一版本是带有前缀的 class。

这是我第一次尝试在沙盒中复制问题。查看开发工具检查器。

https://codesandbox.io/embed/sad-varahamihira-pv73t5?fontsize=14&hidenavigation=1&theme=dark

这是来自沙盒的代码：

import Button from "@mui/material/Button";
import "./styles.css";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@mui/styles";

const theme = createTheme({
  ccomponents: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          color: "red",
          "&.Custom": {
            color: "green"
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <h1>Hello CodeSandbox</h1>
        <Button className="Custom">Testing</Button>
      </div>
    </ThemeProvider>
  );
}

Answer 1

您的沙箱中的代码存在两个问题。

您的主题中有 ccomponents 而不是 components。我怀疑这个 double c 只是您的沙箱特有的拼写错误，可能不在您的真实代码中。
您正在从 "@mui/styles" 导入 ThemeProvider。您应该改为从 "@mui/material/styles" 导入它。 "@mui/styles" 适用于遗留的 JSS 样式方法并使用 ThemeProvider does not make the theme visible to the "@mui/material" styling engine. The ThemeProvider in "@mui/material/styles" places the theme into two different contexts -- one is the same as what @mui/styles uses, the other provides the theme to the styling engine.

这是您的沙箱的工作版本：

import Button from "@mui/material/Button";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          color: "red",
          "&.Custom": {
            color: "green"
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <h1>Hello CodeSandbox</h1>
        <Button className="Custom">Testing</Button>
      </div>
    </ThemeProvider>
  );
}

有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名？

Is there a way to have mui v5 render the classnames without the css-xxx prefix?

css

reactjs

material-ui

附录