Material-UI - why different css is shown on prod environment then development env

Question

I use material UI (verison: ^4.12.3) Select, with custom input.

For some reason the prod env Select input has a black background and :before element with white background.

I don't know from where it comes from.

this is image of the prod:

this is image of the dev Select:

when comparing the 2 css & html of the envs Select element, it's is shown that there is a ::before element added in prod that is not presented in dev

also, the background color is different. in prod there is another class added to the InputBase element, which doesn't exist in dev. this class adds a background-color black:

Edit 1

it seems like MUI inject <style>. in the prod html i see the background-color: black and the ::before. ill try adding the index solution, but my problem is not precedence (the style that i do use override the injected style). also, it wont help the ::before element. how to disable the injected styles ? or work around it ?

the injected bad css:

score 1 · Answer 1 · answered Oct 05 '21 at 12:06

1

Please refer to this question. As answered by user Mordechai.

It seems like webpack could mess with MUI's rules on JSS precedence... This could be solved by adding an index of one to MUI's methods.

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)

answered Oct 05 '21 at 12:06

Nizar

737
6
15

thx for your response. can you please check Edit-1 i answer your question there. – Itay Tur Oct 05 '21 at 12:32
1

Before we start digging into your code, please check out https://mui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds – Nizar Oct 05 '21 at 12:53

Itay Tur · Accepted Answer · 2021-10-11T06:03:05.777

adding <StylesProvider /> wrapper to the app fixed it. we use micro-frontend infrastructure. and one of the frontends app also had makeStyles. this is causing classNames conflicts in MUI.

in the root component <App/>:

import {
  StylesProvider,
  createGenerateClassName
} from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  seed: 'app1'
});

const App = () => {
 return (
    <StylesProvider generateClassName={generateClassName}>
       <OtherAppComponents />
    </StylesProvider>
)
}

if you have more then 2 add a provider and a generator to each, with different seed

Material-UI - why different css is shown on prod environment then development env

2 Answers2