使用自己建立的<Tab/>元件時,與"&.Mui-selected"狀態有問題
P粉775788723
P粉775788723 2023-09-20 19:56:31
0
1
568

我創建了一個自訂的<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粉775788723
P粉775788723

全部回覆(1)
P粉946336138

如何建立一個包裝元件,以這種方式渲染您自訂的 Tab 元件 TestTab,而不是使用 Styled.Tab

#
const TestTab = (props) => {
  return <Tab {...props} />;
};
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板