Material-ui 类名称在构建时更改，为每个被用户覆盖的类名称添加标识符

Question

问题是当使用 classes={{blah blah}} 时，它在本地工作正常，默认材料类名称也没有标识符。但是在其他一些机器上，css 坏了，在检查出了什么问题之后，我才知道 className 生成器或我不知道是什么，通过将计数器编号添加到我使用的 classNames 来更改我的覆盖。 所以现在它看起来像这样。

现在我不想再次重写 css 也不能，因为这是你重写 Mui 类的方式。生产构建很糟糕。

'& .MuiSelect-blah':{ 一些 CSS *woosh }

Answer 1

由于标识符仅附加在类名的末尾，因此您可以使用您尝试定位的CSS selector to match all elements starting with the class name。

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': {
      ...
    }
  },
}));

---

注意：The following syntax 仅适用于 ES6 和 Babel

{
    [keyVariable]: value,
}  

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