Lors de l'utilisation du composant <Tab/> créé par vous-même, il y a un problème avec l'état "&.Mui-selected"
P粉775788723
P粉775788723 2023-09-20 19:56:31
0
1
570

J'ai créé une <Tab/> personnalisée et je souhaite contrôler sa couleur de sélection en utilisant le code suivant :

Code démo du bac à sable

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

Cependant, j'ai découvert :

1. Appliquez directement des composants de style personnalisés => Sélectionnez la couleur rouge

2.Envelopper un composant de style personnalisédans un composant auto-créé => ne fonctionne pas, pas même une couleur sélectionnée par défaut

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

Ce comportement normal de MUI ne reconnaît-il pas les onglets auto-créés ?

P粉775788723
P粉775788723

répondre à tous(1)
P粉946336138

Comment créer un composant wrapper qui restitue votre composant Tab personnalisé de cette façon TestTab,而不是使用 Styled.Tab

const TestTab = (props) => {
  return <Tab {...props} />;
};
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal