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

【问题标题】：How to Overwrite CSS of an external [third-party] component using Material-UI-React?如何使用 Material-UI-React 覆盖外部 [第三方] 组件的 CSS？
【发布时间】：2019-12-25 12:03:57
【问题描述】：

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

.ace-tm .ace_variable {
color : red
}

假设我要用新的颜色属性替换这两个类，我该如何在 Material 样式中做到这一点？

这是我没有运气的尝试！


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

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

【问题讨论】：

标签： css reactjs styles material-ui jss

【解决方案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

【讨论】：