材质 UI 已选择选项卡样式

Posted 2023-02-22

【中文标题】材质 UI 已选择选项卡样式

【英文标题】：Material UI selected Tab styling

【发布时间】：2019-04-27 16:24:57

【问题描述】：

我正在尝试通过样式化组件将样式应用于 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

【参考方案1】：

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

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

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

【讨论】：

是的，我意识到这是一个属性，但是您可以在定义组件时指定所选类的名称。如果您检查选项卡元素，它将具有“已选择”的类名。此外，!important 添加对类样式没有影响。

在这种情况下，您可以使用&.selected background-color: yellow; 并根据需要应用样式。不同之处在于 & .selected 适用于 <StyledTab/> 实现中的子元素，而不是您想要的***元素。

乐于助人:)