Material ui contained button styling being overidden by MuiButtonBase-root

Question

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?

Answer 1

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