CODEWITHSUNDEEP
cssreactjsmaterial-uidevelopment-environmentproduction-environment
Itay Tur
Itay Tur

Reputation: 1689

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

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:

prod env Select

this is image of the dev Select:

dev env 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

html & css comparison

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:

added css class

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:

injected style

Upvotes: 2

Views: 1314

Answers (2)

Itay Tur
Itay Tur

Reputation: 1689

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

Upvotes: 0

Nizar
Nizar

Reputation: 722

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)

Upvotes: 1

Related Questions