在已经使用 withTheme() 的情况下使用 withStyles() 覆盖 material-ui 主题

Question

我一直在创建一组可重用的组件，我一直在使用 classes 属性设置样式以覆盖 MUI class 名称。然后我将很多常见的样式提取到一个主题中，以避免在更复杂的组件中重复。主题是使用 withTheme HOC 包装每个组件。

我现在意识到有些地方我们需要为一次性案例覆盖样式。我认为我应该能够使用 withStyles HOC 来做到这一点，但它似乎对我不起作用。

Codepen 在 https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-0m9cm

MyReusableThemedComponent - 是可重复使用的组件（实际上只是用主题包装 Material UI 标签）

CustomOverideTabs - 是我对 MyReusableThemedComponent 的实现，我试图通过将文本设为小写来覆盖 Material-UI textTransform。

const StyledTabs = withStyles({ root: { textTransform: "lowercase" } })(
  MyReusableThemedComponent
);

我相信 transform: uppercase 是 MuiTab-root 的默认设置 class，但即使在主题中指定它似乎也没有什么不同。

TIA

Answer 1

withStyles 的效果是将 classes 道具注入包装组件（MyReusableThemedComponent 在你的情况下），但你没有对注入的道具做任何事情，除了在创建 tabsStyle 期间将整个 props 对象传递给 useStyles。这将合并两组 classes，但是您需要在某处利用 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 class，但 tabRoot 尚未在任何地方定义。如果将 textTransform 更改为 root: tabsStyle.root，或者如果保持 Tab 渲染不变，textTransform 将按预期工作，您可以通过更改 [=11= 中的规则名称来使其工作] 调用为 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

在已经使用 withTheme() 的情况下使用 withStyles() 覆盖 material-ui 主题

Overriding a material-ui theme using withStyles() while already using withTheme()

css

tabs

themes

reactjs

material-ui