mui v5有没有一种方法可以渲染没有css-xxx前缀的类名？

Question

mui v5有没有一种方法可以渲染没有css-xxx前缀的类名？

4

MUI是一个非常愉快的合作伙伴。在React样式和布局方面，似乎“人人都有自己的方式”。作为一个库开发者，管理这种灵活性的任务必定非常巨大。

我的自定义MUI的方式是使用全局主题。因此，我创建了类名来添加到MuiContainer中。我依赖于overrides中的选择器，现在转而使用mui组件特定的styleOverrides属性。

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

// v4 class names
.MuiContainer-root

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

有没有一种方法可以让主题引擎以相同的方式呈现类名？例如，这是否表明mui依赖于emotion？

另外，当在v4中呈现时，类名包括我的自定义类。

.MuiContainer-root.Luci-AppLayout.root

根据这个附录，在v5中，对于给定的元素有3组类名：

没有前缀的mui
带前缀的mui（在v4中不存在）
我的自定义类“按原样”

仅带前缀的mui会显示在“检查”窗口中，即显示实际呈现为样式元素的类。

附录

根据@Ryan Cogswell的评论，两个版本的类名都会呈现在html中。然而，在开发工具的检查窗口中，用于样式化元素的唯一类是带有前缀的类。

以下是我在沙盒中尝试复制问题的第一个版本。请查看开发工具检查器。 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>
  );
}

- Edmund's Echo

全局类名（例如.MuiContainer-root）在v5中仍然存在，除此之外还有由emotion生成的类名。 - Ryan Cogswell

如果您展示一下在主题中您尝试做什么的例子，那会很有帮助。 - Ryan Cogswell

@Ryan Cogswell 谢谢。你是对的。我错过了那个And/but，在检查窗口中类名如前缀所述。这是否表明需要更改CSS解释顺序？--我将增加更多内容以透露更多任务细节。 - Edmund's Echo

CSS没有被生成。 - Edmund's Echo

请提供一个 code sandbox，其中包含最少量的代码以重现问题（例如，在一个元素上覆盖一个 CSS 属性）。 - Ryan Cogswell

@RyanCogswell 我有一个我想要实现的例子。请注意，我已经在v4中使其工作。 - Edmund's Echo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Cogswell · Accepted Answer

你的沙盒代码存在两个问题。

您的主题中有 ccomponents 而不是 components。我怀疑这个双重的 c 只是特定于您的沙盒的打字错误，可能不在您的真实代码中。
您正在从 "@mui/styles" 中导入 ThemeProvider。您应该从 "@mui/material/styles" 中导入它。 "@mui/styles" 是用于传统 JSS 样式方法的遗留方式，使用 ThemeProvider 不会使主题可见于 "@mui/material" 样式引擎。在 "@mui/material/styles" 中的 ThemeProvider 将主题放置在两个不同的上下文中--一个与 @mui/styles 使用的相同，另一个提供主题给样式引擎。

这是您沙盒的一个工作版本：

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>
  );
}