CODEWITHSUNDEEP
cssreactjsbuttonmaterial-ui
Usman Ali
Usman Ali

Reputation: 143

Material ui contained button styling being overidden by MuiButtonBase-root

I am using material-ui with react. I have a simple contained button using

 <Button variant='contained' color='primary'> Edit</Button>

However the button does not look like a contained button. As seen in this screenshot here.

Upon further investigation I found out the the .MuiButton-containedPrimary style is being overidden by the .MuiButtonBase-root styling as seen in this screenshot taken from chrome dev tools.

Please can someone let me know how to fix this?

Upvotes: 13

Views: 12897

Answers (3)

pushkar goyal
pushkar goyal

Reputation: 11

In my case I have use new material i.e. mui and material-table. When I remove material-table everything is fine but with material-table something is overriding the styles.

Upvotes: 0

aboutaaron
aboutaaron

Reputation: 5389

This issue happened to me when part of my app relied on a component library that also used Material UI. My app and dependency used different versions of Material UI which led to the duplicated .MuiButtonBase-root style.

I solved this by moving @material-ui/core out of dependencies and into peerDependencies in my package.json.

This issue can also occur if you double nest an import. For example:

import Button from '@material-ui/core/Button/Button';  // Bad

Should be:

import Button from '@material-ui/core/Button';  // Good

There's a very helpful thread on this issue in the Material-UI GitHub: https://github.com/mui-org/material-ui/issues/15610

Upvotes: 12

Soapnrope
Soapnrope

Reputation: 33

.MuiButton-root should be the one holding color code, not the .MuiButtonBase-root

Are your button example actually the one you use in your code? I can see that is has primary class which would imply usage of prop color which would result in:

<Button variant="contained" color="primary">
   Edit
</Button>

Recheck added classNames and determine which one is actually overwriting color.

Upvotes: 0

Related Questions