如何用样式化的零部件覆盖材料零部件？

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>

styles.js：

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