Material UI使用withStyles时prop依赖样式无法被theme overrides覆盖

你遇到的是MUI v4 withStyles API的已知逻辑限制：当全局主题的overrides中存在对应组件的样式配置时，createStyles内单个样式键对应的prop依赖回调会被直接覆盖，不会被执行，因此动态样式和全局覆盖都无法按预期生效。只有样式为静态对象时，MUI才会正常执行覆盖逻辑。

方案1：调整样式定义结构（最兼容，无需修改现有overrides配置） #

将整个styles定义为接收theme和props的函数，而非单个样式键为函数，MUI会先执行该函数拿到完整样式对象，再和overrides做合并，既保留prop依赖能力，也能支持全局覆盖：

// 样式定义改为整体函数形式
const styles = (theme: Theme, { backgroundColor }: BaseHeaderProps) => createStyles({
    Appbar: {
      backgroundColor
    },
    // ...moreStyles
});

export default withStyles(styles, { name: 'Component' })(Component);

你的全局overrides配置不需要做任何修改，即可正常覆盖对应样式。

方案2：升级到MUI v5 #

MUI v5重构了样式合并逻辑，不管是向下兼容的withStyles API还是新的styled/sx API，都原生支持prop依赖样式和全局overrides的合并，不会出现回调不执行的问题。

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