材质 UI 已选择选项卡样式

Question

我正在尝试通过样式化组件将样式应用于 Material UI Tab 组件，当它具有选定的 prop 值为 true 时，但我没有任何运气。根据 Material UI API documentation，当所选道具具有真值时，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>
  );
}

codesandbox example

Answer 1

样式未应用，因为您需要通过 !important 覆盖库的样式。它应该看起来像 background-color: yellow !important;。

此外，您的 .selected css 规则不适用于组件，因为组件上的 selected 文本是 attribute 而不是 class。 .selected 规则适用于带有className="selected" 的html 元素。

这是应用了样式的代码示例：https://codesandbox.io/s/72o992lv36