是否可以使用组件类prop覆盖主题覆盖？

Question

我想知道是否有一个巧妙的技巧来使用组件classes道具来覆盖主题替代中定义的某些CSS。

例如： 如果我希望所有Button组件都具有与默认组件不同的font-size。我可以使用theme.overrides道具：

// this works, all Buttons text is 1.1rem
let theme = createMuiTheme({
  overrides: {
    MuiButton: {
      label: {
        "&": {fontSize: "1.1rem"}
      }
    }
  }
})

现在，如果由于某种原因我的按钮之一需要使用其他font-size，我希望使用class prop可以完成这项工作：

const useClasses = makeStyles({
  smallerFontSize: {
    fontSize: "0.9rem"
  }
})
...
const classes = useClasses()
...
<Button 
  classes={{
    // unfortunately this doesn't work, theme overrides is taking precedence
    label: classes.smallerFontSize
  }}
>
  Some smaller text
</Button>
...

由于使用classes属性可以在未覆盖默认主题值的情况下定位和覆盖某些组件的CSS，因此我感到困惑的是，主题覆盖的行为会有所不同，并且特异性比一次高规则。

我认为这有损于具有可自定义主题的目的。

但希望我能缺少一些东西，您的智慧会有所帮助！

更新

我的错误是从同一模块文件中导出创建的主题和makeStyles钩子。

这样做使Mui在挂钩<style>之后插入主题<style>。 要解决此问题并能够按照我的意愿使用类组件道具：

• 从单独的模块导出主题和钩子
• 确保主题模块不依赖于导出钩子的模块
• 确保在使用ThemeProvider时没有父组件导入该钩子

在将主题对象上的overrides属性添加之前，我仍然不太明白为什么事情会起作用。