Apabila menggunakan komponen <Tab/> yang dibuat oleh anda sendiri, terdapat masalah dengan keadaan "&.Mui-selected"

Question

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?

Answer 1

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

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