Material ui contained button styling being overidden by MuiButtonBase-root

user_13260109 0
Viewed 5824

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?

material-ui reactjs button css
4 Answers

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

user_8687240

.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.

user_32486790

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.

user_180363820

Try to move @material-ui/core to devDependencies:

"devDependencies": {
  "@material-ui/core": "^4.12.0",

and also add it to peerDependencies:

"peerDependencies": {
  "@material-ui/core": "^4.12.0"
},

It helped me to remove duplication of MuiButtonBase-root class

user_18768430
Related