问题是当使用 classes={{blah blah}} 时，它在本地工作正常，默认材质类名称也没有标识符。但是在其他一些机器上，css 坏了，在检查出了什么问题后，我开始知道 className 生成器或我不知道的东西，通过将计数器编号添加到我使用的 classNames 来更改我的覆盖。所以现在看起来像这样。
现在我不想再次重写 css，我也不能，因为这是覆盖 Mui 类的方式。生产构建很糟糕。
'& .MuiSelect-blah':{ 一些 css *wooosh }
Material-ui 类名称在构建时更改，为用户覆盖的每个类名称添加标识符
IT技术
reactjs
material-ui
2021-05-16 22:55:31
2个回答
在 App 主文件中尝试：
import React from 'react';
import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
const generateClassName = createGenerateClassName({
productionPrefix: 'some',
});
export default function App() {
return (
<StylesProvider generateClassName={generateClassName}>...</StylesProvider>
);
}
由于标识符仅附加在类名的末尾，因此您可以使用CSS 选择器来匹配所有以您尝试定位的类名开头的元素。
div[class^='myclass'], div[class*=' myclass']{
color: #F00;
}
假设您不想以MuiOutlinedInput-root类名为目标。
使用一个简单的辅助函数getSelector()，您可以像这样完成它：
import {makeStyles} from '@material-ui/core/styles';
const getSelector = (className) => `& div[class^='${className}'], div[class*=' ${className}']`;
const useStyles = makeStyles((theme) => ({
input: {
[getSelector('MuiOutlinedInput-root')]: { // this will generate the selector
...
},
'& input': {
...
}
},
}));
注意：以下语法仅适用于ES6和Babel
{
[keyVariable]: value,
}