Styled-Components全局样式自定义MUI组件样式不生效排查

和渲染时机没有任何关系，样式不生效完全是CSS语法错误导致的，从你贴出的渲染后style标签内容可以直接定位两个错误：

• 类选择器语法错误：你生成的样式规则写的是.teste1 :{...}，类名和样式块之间多了空格和冒号。一方面多余的空格会让选择器变成「匹配class为teste1元素的所有后代元素」，另一方面多余的冒号直接导致整条CSS规则语法非法，浏览器会直接丢弃整条规则不做解析。
• 优先级关键字拼写错误：你写的!import是错的，CSS里强制提升优先级的关键字是!important，拼写错误会导致对应的样式声明直接失效。

你可以打开浏览器开发者工具的Elements面板查看注入的style标签，非法的CSS规则会被浏览器标灰，这也是为什么普通div加了这两个类名也不生效，和MUI组件本身没有关系。

紧急修复现有代码 #

直接修正GlobalStyle里的CSS语法错误即可：

/* 错误示例
.teste1 :{background-color:red;border:1px solid red !import;}
.teste2 :{background-color:blue;border:1px solid blue !import;}
*/

/* 正确写法 */
.teste1 {
  background-color: red;
  border: 1px solid red !important;
}
.teste2 {
  background-color: blue;
  border: 1px solid blue !important;
}

Styled-Components 搭配 MUI 的最佳实践 #

不推荐手动写全局类名再通过classes属性传给MUI组件的写法，长期维护容易出现类名冲突、样式优先级混乱的问题，推荐两种更稳定的实现方式：

• 直接用styled-components包装MUI组件，样式会自动生成唯一类名，不需要手动管理全局类名，也能避免类名冲突：

  import { Drawer } from '@mui/material';
  import styled from 'styled-components';
  
  const StyledCustomDrawer = styled(Drawer)`
    .MuiDrawer-paper {
      background-color: red;
      border: 1px solid red;
    }
  `
  
  // 业务代码中直接使用StyledCustomDrawer替换原Drawer组件即可，不需要额外传classes配置
  

• 如果必须使用全局样式，把createGlobalStyle生成的全局组件放在应用根组件的最顶层，保证样式注入顺序在MUI默认样式之后，尽量减少!important的滥用，仅在确实需要覆盖高优先级默认样式时使用。如果使用MUI v5及以上版本，可以配置StyledEngineProvider的injectFirst属性，调整样式注入顺序，避免MUI默认样式覆盖自定义样式。

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