Material-UI v5搭配Emotion时自定义CSS被官方媒体查询覆盖如何解决？

结论 #

你遇到的情况属于MUI v5搭配Emotion使用时的预期表现，并非配置遗漏，核心原因是CSS优先级规则和样式加载逻辑的共同作用：

• 你配置的StyledEngineProvider injectFirst作用是将用户自定义的Emotion样式注入到页面样式表的最靠前位置，MUI组件自带的默认样式会在后续加载时插入到样式表更靠后的位置。
• CSS中同权重的规则，后加载的优先级更高，且媒体查询本身不会提升选择器的权重，所以MUI自带的同权重媒体查询样式会覆盖你提前注入的自定义普通样式。

更高效的解决方案 #

不需要逐个添加媒体查询覆盖，可选用以下更简便的方案：

1. 提升自定义样式的选择器权重
   通过重复选择器符号&提升自定义样式权重，只要权重高于MUI自带的单类选择器，就不会被覆盖：

<Container maxWidth="lg"
  css={css`
    && {
      margin-top: 80px;
      padding: 80px; 
    }
  `}
  {...rest}>
  {children}
</Container>

2. 改用MUI官方的sx属性
   sx是MUI专门优化过的样式API，生成的样式优先级默认高于组件自带的默认样式，不需要额外处理权重问题，还支持直接调用主题变量，写法和css prop基本一致：

<Container maxWidth="lg"
  sx={{
    marginTop: '80px',
    padding: '80px'
  }}
  {...rest}>
  {children}
</Container>

3. 覆盖组件默认样式（全局统一修改场景适用）
   如果某类组件的样式需要全局统一修改，可直接在主题配置中覆盖组件的默认样式，不需要逐个组件写自定义样式：

const themeConfiguration = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          marginTop: '80px',
          padding: '80px'
        }
      }
    }
  }
})

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