Material ui 包含被 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

Answer 2

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

Answer 3

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

Answer 4

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