Я хотел бы настроить выбранную вкладку компонента «Вкладки MUI». Мой выбор стиля — модули CSS. Но у меня возникли трудности с применением правильного селектора. Я также применил их порядок внедрения CSS, чтобы можно было настроить стили в соответствии с документацией.
Согласно их документации, я попробовал следующее. У меня есть класс для моей пользовательской вкладки под названием .myTab.
.myTab.Mui-selected {
color: red;
border-radius: 50%;
}
затем я применяю класс к своей вкладке.
<Tab
className = {classes.myTab}>
{children}
</Tab>
Но пока у меня нет успеха.
🤔 А знаете ли вы, что...
React поддерживает создание контекста для передачи данных между компонентами.
Вам нужно использовать :global() селектор модулей CSS следующим образом:
.myTab:global(.Mui-selected) {
color: red;
border-radius: 50%;
}
Вы можете взглянуть на этот StackBlitz для живого рабочего примера.