Пользовательский интерфейс материала выбран стиль вкладки

Question

Я пытаюсь применить стилирование с помощью стилизованных компонентов к компоненту «Вкладка пользовательского интерфейса», когда для него задано значение «true», но мне не повезло.В соответствии с документацией API UI Material компонент Tab получит класс css, когда выбранное свойство имеет истинное значение, которое оно имеет, но ни один из стилей, которые я пытаюсь применить к этому cssкласс фактически применяется.

Компонент табуляции:

const StyledTab = styled(({ ...props }) => (
  <Tab {...props} classes={{ selected: "selected" }} />
))`
  & .selected {
    background-color: yellow;
  }
`;

Приложение:

function StyledComponentsTab() {
  return (
    <div>
      <StyledTab label="test" selected />
    </div>
  );
}

пример кода и коробки

Answer 1

Стиль не применяется, потому что вам нужно переопределить стиль библиотеки через !important.Он должен выглядеть так: background-color: yellow !important;.

Кроме того, ваше правило .selected css не применяется к компоненту, поскольку текст selected в вашем компоненте - это attribute, а не class.Правило .selected применяется к html-элементам с className="selected".

Вот пример кода с примененным стилем: https://codesandbox.io/s/72o992lv36