如何在MUI v5中为HTML元素标签（html、body、#root）设置样式？

你已经通过MuiCssBaseline的styleOverrides配置了body的样式，其实html元素的样式也可以用完全相同的方式配置，不需要额外方案，直接在同一个styleOverrides对象里添加html选择器即可：

components: { 
  MuiCssBaseline: { 
    styleOverrides: { 
      // 保留你已有的body样式配置
      body: { 
        width: '100%', 
        height: '100%', 
        minHeight: '100%', 
        margin: 0, 
        padding: 0, 
        fontSize: '62.5%', 
        textAlign: 'left' 
      },
      // 添加html元素的样式配置
      html: {
        width: '100%', 
        height: '100%', 
        minHeight: '100%', 
        margin: 0, 
        padding: 0, 
        fontSize: '62.5%', 
        textAlign: 'left'
      }
    } 
  } 
}

为什么这样可行？ #

CssBaseline是MUI官方提供的全局基础样式重置组件，它会向整个应用注入全局样式规则。所以在它的styleOverrides里，你不仅可以配置MUI组件的自定义样式，还能直接覆盖html、body这类原生HTML元素的全局样式——这是MUI推荐的全局样式管理方式，和你已有的body配置逻辑完全统一，方便集中维护。

小提醒 #

你在sxLayout里写的&要改成&哦，因为在JavaScript模板字符串中，CSS选择器里的父元素引用直接用&即可，&是HTML转义字符，在这里会被当成普通字符串处理，导致样式规则无法生效。

内容的提问来源于stack exchange，提问作者Fiddle Freak