首页  >  问答  >  正文

使用自己创建的<Tab/>组件时,与"&.Mui-selected"状态有问题

我创建了一个自定义的<Tab/>,我想通过使用以下代码来控制它的选中颜色:

沙盒演示代码

export const Tab = styled(MuiTab)({
  "&.Mui-selected": {
    color: "red"
  }
});

然而,我发现:

1.直接应用自定义样式的组件 => 选中颜色为红色

2.将自定义样式的组件包装在一个自创建的组件中 => 不起作用,甚至没有默认的选中颜色

<Tabs value={value} variant="scrollable">
  <Tab label="Tab" value={1} /> //选中颜色 = 默认值
  <TestTab label="TestTab" value={2} /> //选中颜色 = 默认值(问题在这里)
  <Styled.Tab label="Styled.Tab" value={3} /> //选中颜色 = 红色(好的,但我想包装在自创建的组件中)
</Tabs>

这是MUI不识别自创建的Tab的正常行为吗?

P粉775788723P粉775788723416 天前530

全部回复(1)我来回复

  • P粉946336138

    P粉9463361382023-09-21 00:20:25

    如何创建一个包装组件,以这种方式渲染您自定义的 Tab 组件 TestTab,而不是使用 Styled.Tab

    const TestTab = (props) => {
      return <Tab {...props} />;
    };

    回复
    0
  • 取消回复