时间戳

首页 > 解决方案 > 如何使用 Material-UI-React 覆盖外部 [第三方] 组件的 CSS？

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

问题描述

我正在尝试覆盖不是在 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 稍后将它们注入组件中。

标签： cssreactjsstylesmaterial-uijss

解决方案

我刚刚找到了这个，并认为我会为后代分享解决方案：

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

推荐阅读