和梅一起工作很愉快.似乎"每个人都有自己的风格和布局".作为一名库开发人员,管理这种灵活性的任务必须是巨大的.

定制mui的"我的方式"是与全球主题合作.所以我创建了类名来添加MuiContainer.我依靠overrides中的 Select 器,现在是mui组件特定的styleOverridesprops .

我的 Select 器无法工作,原因如下:

// v4 class names
.MuiContainer-root

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

有没有办法让主题引擎以同样的方式呈现类名?例如,这是否证明梅依赖emotion

另外,在v4中呈现时,类名包括我的自定义类:

.MuiContainer-root.Luci-AppLayout.root

根据附录,在v5中,给定元素有3组类名:

  • 不带前缀的梅
  • 带前缀的mui(v4中不存在)
  • 我的自定义类"按原样"

只有带有前缀的mui显示在"判断"窗口中;i、 例如,显示为元素设置样式而实际呈现的类.

补遗

根据@Ryan Cogswell的注释,two个版本的类名在html中呈现.但是,在dev工具的判断窗口中,用于设置元素样式的类的唯一版本是带有前缀的类.

这是我第一次try 在沙箱中复制问题.查看开发工具判断器.

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

推荐答案

沙箱中的代码有两个问题.

  1. 你的主题是ccomponents而不是components.我怀疑这个double c只是Sandbox 特有的一个输入错误,可能不在您的真实代码中.
  2. 你是从"@mui/styles"导入ThemeProvider.您应该从"@mui/material/styles"导入它."@mui/styles"用于遗留JSS样式化方法,使用ThemeProvider不会使主题对"@mui/material"样式化引擎可见."@mui/material/styles"中的ThemeProvider将主题分为两种不同的语境——一种是same as what @mui/styles uses,另一种是provides the theme to the styling engine.

以下是Sandbox 的工作版本:

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

Edit condescending-dew-r1kwc1

Css相关问答推荐

如何将表格单元格的最后一个子级与单元格底部对齐?

如何在JavaFX中设置分隔符的样式?

如何取消 CSS 伪类中的属性设置?

动态覆盖 Vuetify 类

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 从 React MUI 自定义不同组件的正确方法?

    根据选项 colored颜色 更改 Select 文本 colored颜色

    为什么同一个 CSS 类连续出现两次

    在revealjs/Quarto中定义一类反背景的幻灯片

    带填充的水平边框

    如何测试页面上的文本被删除

    如何将 Google 字体链接到我的 Nuxt 文件?

    如何在 nth-child 中正确传递 CSS 变量?

    如何将页脚保持在屏幕底部

    如何使用 Bootstrap 3 阻止按钮保持压抑状态

    CSS设置宽度以填充剩余区域的百分比

    修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题?

    数据协议 URL 大小限制

    如何重置或覆盖 IE CSS 过滤器?

    如何在 Visual Studio 2017+ 中编译 Less/Sass 文件