如何让Material UI主题样式覆盖页面级font inherit CSS规则？

你遇到的问题是因为目标页面的全局<h6>元素选择器（h6 { font: inherit; }）优先级高于MUI通过类名注入的样式，导致主题设置的fontWeight不生效。以下是几种可行的解决方案：

1. 用!important强制提升样式优先级 #

在MUI主题中为fontWeight添加!important，直接覆盖目标页面的规则：

export const theme = createTheme({
  typography: {
    h6: {
      fontWeight: "800 !important"
    }       
  },        
});

这种方法简单直接，但要注意!important可能会带来后续样式维护的问题，仅在必要时使用。

2. 重置font属性并显式设置fontWeight #

目标页面的font: inherit是简写属性，会覆盖fontWeight。可以在组件中通过sx属性重置font属性，再设置fontWeight：

<Typography variant="h6" sx={{ 
  font: "unset",
  fontWeight: 800
}}>
  示例文本
</Typography>

font: unset会重置目标页面的font: inherit，让fontWeight规则正常生效。

3. 使用Shadow DOM隔离样式（推荐） #

浏览器扩展场景下，最彻底的解决方案是将扩展组件挂载到Shadow DOM中，完全隔离目标页面的CSS：

// 注入扩展组件时的代码
const container = document.createElement('div');
document.body.appendChild(container);
// 创建Shadow Root
const shadowRoot = container.attachShadow({ mode: 'open' });
// 将React组件挂载到Shadow DOM内
ReactDOM.createRoot(shadowRoot).render(
  <ThemeProvider theme={theme}>
    <YourExtensionComponent />
  </ThemeProvider>
);

Shadow DOM会形成独立的样式作用域，目标页面的全局CSS无法渗透进来，MUI主题样式可以正常生效，这也是浏览器扩展隔离样式的最佳实践。

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