时间戳

首页 > 解决方案 > 材质 UI 已选择选项卡样式

reactjs - 材质 UI 已选择选项卡样式

问题描述

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

代码框示例

标签： reactjsmaterial-uistyled-components

解决方案

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

此外，您的.selectedcss 规则不适用于组件，因为组件selected上的文本 attribute不是class. 该.selected规则适用于带有className="selected".

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

推荐阅读