如何在Material UI v5的MuiCssBaseline中为所有标题及段落标签设置margin:0？

错误原因 #

你遇到的TS错误是因为在JavaScript/TypeScript对象中，直接写h4作为属性名会被解析为变量，而非CSS选择器。必须用引号将选择器包裹，明确它是字符串属性。

正确实现方式 #

要为所有标题标签（h1-h6）和<p>标签设置margin: 0，修改styleOverrides的写法如下：

方式一：对象语法（推荐） #

import { createTheme } from '@mui/material/styles';

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

方式二：模板字符串语法（支持复杂CSS） #

如果需要编写嵌套规则等更复杂的CSS，可以使用模板字符串：

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

是否应该在MuiCssBaseline中设置？ #

完全应该。MuiCssBaseline的核心作用就是提供全局样式重置与基础样式统一，这类针对原生HTML标签的全局样式调整，放在这里最符合Material UI的设计逻辑，能确保样式在整个应用中统一生效，且不会和其他组件样式冲突。

内容的提问来源于stack exchange，提问作者El Anonimo