как переопределить компоненты материала с помощью стилизованных компонентов?

Question

Как переопределить компоненты материала со стилизованными компонентами, если классы компонентов material-ui обычно имеют более высокий приоритет, чем классы стилизованных компонентов. Является ли использование флага! Important одним решением?

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

классов по приоритету

.MuiFab-sizeSmall-963 
.MuiFab-primary-1145
.MuiFab-root-1153
.MuiButtonBase-root-1047
.QqyyK

Answer 1

Я бы предложил использовать jss с mui, но вы можете добавить в него wrapper и стили перезаписи для компонентов material-ui, может быть, вы добавите, как следует перезаписывать не предсказуемое имя класса, например .MuiFab-root-1154? это довольно легко обрабатывать, например:

<MaterialUiWrapper>
    <Fab />
</MaterialUiWrapper>

стили. js:

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