如何使用 MUI 主题设置非 MUI 组件的样式？答案

【问题标题】：How to style non MUI Components with an MUI theme?如何使用 MUI 主题设置非 MUI 组件的样式？
【发布时间】：2018-12-24 09:31:25
【问题描述】：

例如，如果我需要动态地将 MUI 主题应用于我的非 MUI 组件，例如 <h1>。如果我希望 <h1> 标签始终是相同的颜色（来自主题颜色）并且始终使用相同的边距，我如何在主题中全局定义它，而不仅仅是为每个组件生成它。 <h1> 只是一个例子，但我的担忧延伸到我可能在我的应用程序中使用的任何第三方组件。

【问题讨论】：

有同样的问题，你解决了吗？
@EnricoPolanski 从来没有
我想我找到了解决方案，如果你愿意，我可以稍后发布作为答案

标签： reactjs material-design material-ui

【解决方案1】：

假设您有一个 ParentComponent，并且您希望将样式应用于其子组件：

const useStyles = makeStyles({
  '@global': {
    '.children-css-selector': {
      height: 100,
      width: 100,
      backgroundColor: 'blue'
    }
  }
});

export default function ParentComponent() {
  useStyles();

  return (
       your code....
  )
}

【讨论】：