MUI 4.12.3中如何覆写makeStyles创建的CSS类

核心结论 #

你当前的写法完全无法生效，且这种跨文件、不关联组件覆写样式的思路不属于MUI 4的推荐实践。 #

失效原因 #

• MUI 4的makeStyles生成的样式是模块化隔离的，每个makeStyles调用都会生成带独立hash后缀的CSS类名。你在B文件重新定义同名的content样式，本质是创建了一套全新的、和A文件完全无关的类，不会对A文件的元素产生任何影响。
• 你在B文件中调用useStyles拿到的classes对象没有绑定到任何渲染的JSX节点上，就算生成了样式规则，也没有挂载目标，自然不会生效。

实现方案 #

方案1（优先推荐：内聚响应式逻辑） #

你需要的响应式高度逻辑本身就应该和定义样式的位置放在一起，直接修改A文件的样式代码即可，不需要跨文件覆写：

// A文件样式修改
const useStyles = makeStyles((theme) => ({
  content: {
    // 直接在样式回调里用主题断点判断，不需要组件传参
    minHeight: theme.breakpoints.up('sm') ? '100vh' : '112vh',
  },
}));

如果你需要保留动态传参的能力，也可以在A文件对应的组件内部获取isDesktop标识，传给useStyles即可，逻辑内聚不会出现冲突。

方案2（必须跨文件覆写时使用：全局样式注入） #

如果因为权限、代码拆分等原因确实不能修改A文件代码，可以在B文件通过全局样式的方式覆写，注意要匹配A文件生成的实际类名规则：

// B文件内，需要在应用渲染树内挂载该组件
import GlobalStyles from '@material-ui/core/GlobalStyles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function ContentStyleOverride() {
  const isDesktop = useMediaQuery(theme => theme.breakpoints.up('sm'));
  return (
    <GlobalStyles
      styles={{
        // 模糊匹配makeStyles生成的content类名，hash后缀不固定
        '[class*="makeStyles-content-"]': {
          minHeight: `${isDesktop ? 100 : 112}vh !important`,
        }
      }}
    />
  )
}

这种方案需要加!important提升样式优先级，且要注意匹配规则不要太宽泛，避免污染其他同名类的样式。 #

注意事项 #

• 刻意绕开MUI CSS-in-JS的模块化隔离机制做跨文件覆写，后续MUI版本升级、类名生成规则变化时，覆写逻辑会直接失效
• 样式逻辑散落在和组件渲染完全无关的B文件中，后续维护排查样式问题的成本会非常高，非必要不要用这种实现方式

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