Reactjs 使用 MuiCssBaseline 在所有 MUI v5 标签上设置边距 0

发布于04月24日

我正在寻找一种方法来扩展MUIv5的MuiCssBaseline，在所有的标题和段落标签上设置margin: 0.我试过这个:

MuiCssBaseline: {
  styleOverrides: {
    '@global': {
      h4 {
        margin: 0
      }
    }
  }
}

但结果是TS18004: No value exists in scope for the shorthand property 'h4'. Either declare one or provide an initializer人.

正确的方式是什么？它到底应该被设定为MuiCssBaseline吗？

推荐答案

下面是如何在主题中处理这一问题的一个语法示例.您可以在此处找到有关覆盖全局样式的文档:https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override.

import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        h1, h2, h3, h4, h5, h6, p {
          margin: 0;
        }
      `
    }
  }
});

export default function OverrideCssBaseline() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <h1>h1 element</h1>
      <h2>h2 element</h2>
      <h3>h3 element</h3>
      <h4>h4 element</h4>
      <h5>h5 element</h5>
      <h6>h6 element</h6>
      <p>p element</p>
    </ThemeProvider>
  );
}

另一种不依赖于CssBaseline的方法是使用GlobalStyles组件，如下所示.

import * as React from "react";
import GlobalStyles from "@mui/material/GlobalStyles";

export default function GlobalStylesExample() {
  return (
    <>
      <GlobalStyles styles={{ "h1, h2, h3, h4, h5, h6, p": { margin: 0 } }} />
      <h1>h1 element</h1>
      <h2>h2 element</h2>
      <h3>h3 element</h3>
      <h4>h4 element</h4>
      <h5>h5 element</h5>
      <h6>h6 element</h6>
      <p>p element</p>
    </>
  );
}