Question

我一直在创建一组可重用的组件，这些组件已经使用class prop覆盖MUI类名进行了样式设置。然后，我将许多常见样式提取到主题中，以避免在更复杂的组件中重复。主题是使用withTheme HOC包装每个组件。

我现在意识到，在某些情况下，我们需要覆盖一些地方。我以为我应该可以使用withStyles HOC来做到这一点，但这似乎对我不起作用。

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

MyReusableThemedComponent-是可重用的组件（实际上只是将Material UI选项卡包装为主题）

CustomOverideTabs-是MyReusableThemedComponent的实现，在这里我试图通过使文本小写来覆盖Material-UI textTransform。

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

我相信转换：大写是MuiTab根类的默认设置，但是即使在主题中指定它也似乎没有什么作用。

TIA

Answer 1

withStyles的作用是将classes道具注入到被包裹的组件中（在您的情况下为MyReusableThemedComponent），但是除了通过在创建props期间，整个useStyles都指向tabsStyle的对象。这将合并两组类，但是您需要在某个地方利用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更改为root: tabsStyle.root，则Tab会按预期工作，或者如果您保持withStyles呈现不变，则可以通过更改{{1}中的规则名称来使其工作}称为tabRoot（例如withStyles({ tabRoot: { textTransform: "lowercase" } })）。

使用tabsStyle.tabRoot的示例（即仅更改withStyles参数）：https://codesandbox.io/s/overriding-a-withtheme-with-withstyle-hoc-fxybe

使用tabsStyle.root的示例（即，仅在渲染classes元素时更改Tab道具的指定方式）：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主题

1 个答案: