how to override material components with styled components?

2
votes

How to override material components with styled components if material-ui components classes usually has the highest priority than styled-component classes. Is the usage of !important flag the one solution?

<button class="MuiButtonBase-root-1047 MuiFab-root-1153 sc-jAaTju QqyyK MuiFab-sizeSmall-1161 MuiFab-primary-1155" tabindex="0" type="button" top="80">
  <span class="MuiFab-label-1154"></span>
  <span class="MuiTouchRipple-root-1050"></span>
</button>

classes by priority

.MuiFab-sizeSmall-963 
.MuiFab-primary-1145
.MuiFab-root-1153
.MuiButtonBase-root-1047
.QqyyK
1
javascriptmaterial-uistyled-components

1 Answers

0
votes

I would suggest to use jss with mui, but You could add a wrapper and over-write styles for material-ui components in it, maybe you add how should over-write a none predictable class name like .MuiFab-root-1154 ? it is quite easy to handle, ex:

<MaterialUiWrapper>
    <Fab />
</MaterialUiWrapper>

styles.js :

const MaterialUiWrapper = Styled.div`
  [class*=' MuiFab-root']
  [class^='MuiFab-root'] {
       background: #fff;
   }
`;