Question

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

材质用户界面已选择标签样式

1 个答案: