Apabila menggunakan komponen <Tab/> yang dibuat oleh anda sendiri, terdapat masalah dengan keadaan "&.Mui-selected"
P粉775788723
P粉775788723 2023-09-20 19:56:31
0
1
567

Saya mencipta tersuai <Tab/> dan saya mahu mengawal warna pemilihannya dengan menggunakan kod berikut:

Kod demo kotak pasir

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

Namun, saya dapati:

1 Terus gunakan komponen gaya tersuai => Pilih warna sebagai merah

2.Membalut komponen gaya tersuaidalam komponen ciptaan sendiri => tidak berfungsi, malah warna yang dipilih secara lalai

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

Adakah kelakuan biasa MUI ini tidak mengenali Tab yang dibuat sendiri?

P粉775788723
P粉775788723

membalas semua(1)
P粉946336138

Cara membuat komponen pembungkus yang menjadikan komponen Tab tersuai anda dengan cara ini TestTab,而不是使用 Styled.Tab

const TestTab = (props) => {
  return <Tab {...props} />;
};
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan