如何使用 Material ui 设置全局元素的样式？

Question

我需要*, *:after, *:before使用样式material ui，还需要更改网络应用程序的全局字体系列。我该如何实现这一目标？

Material-UI 版本：1.0.0-beta.5

反应版本：15.4.1

Answer 1

在很长一段时间内，这是 Material-UI 中的隐藏选项之一，但现在在 DOM 中设置任何元素样式的最简单方法是使用 jss-plugin-global 提供的 @global 类：

const GlobalCss = withStyles({
    "@global": {
      "html, body": {
        margin: 0,
        padding: 0
      },
      ".App": {
        backgroundColor: "blue",
        fontFamily: "sans-serif",
        textAlign: "center"
      }
    }
  })(() => null);

这里以CodeSandbox项目为例，使用此方法替换通常的css文件。

文档中引用了此功能

更新：MUI v5 有一个用于全局样式的专用组件，但工作方式相同：

import { GlobalStyles } from '@mui/material'

...

  const globalStyle = {
    a: {
      textDecoration: 'none'
    }
  }

  return (
    <>
      <GlobalStyles styles={globalStyle} />
      <App />
    </>
  )
}