CODEWITHSUNDEEP
reactjsmaterial-ui
sanister
sanister

Reputation: 430

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.

check numbers in Mui Stuff!

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 }

Upvotes: 3

Views: 4998

Answers (2)

ntcho
ntcho

Reputation: 311

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

Upvotes: 2

Oleg Levin
Oleg Levin

Reputation: 3621

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

Upvotes: 1

Related Questions