使用withStyles()覆盖材料-ui主题，同时已经使用withTheme()
我一直在创建一组可重用的组件，我一直在使用类支柱来重写MUI类名。然后，我将许多常见的样式提取到一个主题中，以避免在更复杂的组件中重复。主题是使用withTheme HOC封装每个组件。
我现在意识到，有些地方需要推翻一次性案件的风格。我想我应该可以用withStyles做这件事，但是它似乎对我不起作用。
https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-0m9cm公司
MyReusableThemedComponent -是可重用的组件(实际上只是用主题包装材料UI选项卡)
CustomOverideTabs -是我的MyReusableThemedComponent的实现，在这里，我试图通过使文本小写来覆盖材质-UI textTransform。
const StyledTabs = withStyles({ root: { textTransform: "lowercase" } })(
MyReusableThemedComponent
);我相信转换:大写是MuiTab-root类的缺省值，但是即使在主题中指定它也没有什么区别。
提亚
回答 1
Stack Overflow用户
发布于 2019-12-12 20:36:01
withStyles的效果是将一个classes支柱注入包装组件(在您的示例中是MyReusableThemedComponent)，但是除了在创建tabsStyle期间将整个props对象传递给useStyles之外，您不会对注入的道具做任何事情。这将合并这两组类，但是需要在某个地方利用tabsStyle.root来产生任何效果。
呈现Tab元素的代码如下：
<Tab
key={index}
label={tab.tabTitle ? tab.tabTitle.toString() : "tab" + { index }}
disabled={tab.disabled}
classes={{
root: tabsStyle.tabRoot,
selected: tabsStyle.selectedTab
}}
/>这利用了tabsStyle.tabRoot作为root类，但是还没有定义tabRoot。如果您将其更改为textTransform，或者如果您将Tab呈现保持不变，则可以通过将withStyles调用中的规则名更改为tabRoot (例如withStyles({ tabRoot: { textTransform: "lowercase" } }))来使其正常工作。
使用tabsStyle.tabRoot的示例(即只更改withStyles参数)：https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-fxybe
使用tabsStyle.root的示例(即仅在呈现Tab元素时更改classes支柱的指定方式)：https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-ptj87
沙箱中的另一个问题是，您似乎试图在ConditionalThemeWrapper中指定主题中的样式重写，但主题的结构不正确。主题中的MuiFab和MuiTab条目应该在overrides键中。下面是沙箱的修改版本，演示如下：https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-ju296
相关文件：
https://stackoverflow.com/questions/59310583
复制相似问题
腾讯云开发者
