和梅一起工作很愉快.似乎"每个人都有自己的风格和布局".作为一名库开发人员,管理这种灵活性的任务必须是巨大的.
定制mui的"我的方式"是与全球主题合作.所以我创建了类名来添加MuiContainer
.我依靠overrides
中的 Select 器,现在是mui组件特定的styleOverrides
props .
我的 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>
);
}