When using the <Tab/> component created by yourself, there is a problem with the "&.Mui-selected" state
P粉775788723
P粉775788723 2023-09-20 19:56:31
0
1
461

I created a custom <Tab/> and I want to control its selection color by using the following code:

Sandbox Demo Code

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

However, I found:

1. Directly apply custom style components => The selected color is red

2.Wrapping custom style componentsin a self-created component => does not work, not even the default selected color

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

Is this normal behavior that MUI does not recognize self-created Tabs?

P粉775788723
P粉775788723

reply all(1)
P粉946336138

How to create a wrapper component that renders your custom Tab component this way TestTab instead of using Styled.Tab

const TestTab = (props) => {
  return <Tab {...props} />;
};
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!