Material-ui classes name changes on build, adds identifiers to each class name that are overriden by user

问题

The problem is when used classes={{blah blah}}, it was working fine locally also default material class names were having no identifiers. But on some other machine the css broke, after checking what went wrong I came to know that className generator or something I don't know what, changed my overrides by adding counter number to the classNames I have used. So now it looks something like this.

Now I don't want to rewrite css again also I can't because this is how you override Mui classes. Production build sucks.

'& .MuiSelect-blah':{ some css *wooosh }

回答1:

Try in App main file:

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

回答2:

Since the identifier is only appended on the end of the class name, you can use a CSS selector to match all elements starting with the class name that you are trying to target.

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

Let's say you wan't to target the MuiOutlinedInput-root class name.

With a simple helper function getSelector(), you could get it done like:

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

NOTE: The following syntax is only available on ES6 and Babel

{
    [keyVariable]: value,
}

来源：https://stackoverflow.com/questions/58525586/material-ui-classes-name-changes-on-build-adds-identifiers-to-each-class-name-t

标签

reactjs

material-ui