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

Question

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 }

By default, version 4+ does not add the numeric suffixes to the Mui CSS class names (v3 did). Is the "other machine" using an older version of Material-UI? — Ryan Cogswell, Oct 23 '19 at 14:58
When you say "it was working fine locally", do you just mean in dev mode? Or was the production build working fine locally? — Ryan Cogswell, Oct 23 '19 at 15:01
yes in dev mode. When i haven't made any build. But some other guy made build and when i pull his code, my css broke too. — sanister, Oct 23 '19 at 15:02
If you do the build yourself, do you see the same behavior? Unless you have code that is specifically changing the classNameGenerator behavior, it seems like the build was done using a older version of Material-UI. — Ryan Cogswell, Oct 23 '19 at 16:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201344/discussion-between-sandy-and-ryan-cogswell). — sanister, Oct 23 '19 at 17:22

score 2 · Answer 1 · answered Jun 16 '20 at 20:12

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,
}

score 1 · Answer 2 · answered Oct 23 '19 at 17:20

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

answered Oct 23 '19 at 17:20

Oleg

3,580
1
7
12

After setting this up, do I need a consumer where I use `makeStyles()`? Because this has patially fixed the problem, but still, some parts are broken. – dugong Apr 02 '20 at 14:00

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

2 Answers2

Linked