如何使用Material-UI-React覆盖外部[第三方]组件的CSS？

Question

我正在尝试覆盖一个外部组件的默认CSS，它不是在Material-UI或我的项目中开发的。在styled-components中，我可以使用根类并用自定义CSS替换它们。我如何用Material-UI-React做同样的操作？

.ace-tm .ace_variable {
color : red
}

假设我必须用新的颜色属性替换这两个类，我如何在材质样式中做到这一点呢？

这是我试过的，但没有运气！

const Styles = {
  " & ace-tm": {
    "& ace_variable": {
      color: red,
      fontSize: "16px"
    },
  }
};

我使用withStyles稍后将它们注入到组件中。

Answer 1

我只是发现了这一点，并认为我应该为后代分享解决方案：

const GlobalCss = withStyles((theme) => ({
  '@global': {
    '.ace-tm .ace_variable': {
      color: 'red',
    },
  },
}))(() => null)

const SomeComponent = () => {
  return (
    <>
      <GlobalCss />
      <h1>Hey Jude</h1>
      <SomeComponentWhoseCSSWillBeModified />
    </>
}

欲了解更多信息，请访问:https://material-ui.com/styles/advanced/#global-css