我创建了一个自定义的<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粉9463361382023-09-21 00:20:25
如何创建一个包装组件,以这种方式渲染您自定义的 Tab 组件 TestTab
,而不是使用 Styled.Tab
const TestTab = (props) => { return <Tab {...props} />; };