使用Styled-Components

Question

我在React Bootstrap中使用样式组件。我们希望根据状态对选项卡（本例中的选项卡3）进行着色。选项卡未激活时效果很好，但当它处于活动状态时，Bootstrap样式会覆盖该样式。

我已经确定了在控制台中覆盖我的颜色的风格。当我使用控制台关闭样式时，我会看到我想要的标签颜色。

我只是不确定如何使用样式组件来定位此样式。我尝试过试验来自官方doc的不同想法但是还没有能够让它发挥作用。

我的风格组件：

 export const TabNavItem = styled(NavItem)`
      background-color: ${props => (props.colorize ? 'orange' : 'white')};
      }
    `;

用法：

  render() {
    const { children, active, colorize } = this.props;
    return (
      <TabNavItem onClick={this.handleChangeLocation} active={active} colorize={colorize}>
        {children}
      </TabNavItem>
    );
  }

当标签处于非活动状态时，颜色正常工作：

当标签处于活动状态时，颜色由Bootstrap样式覆盖：

这是我需要覆盖的样式（背景颜色）：

Answer 1

我通常不会将styled-components直接应用于每个react-bootstrap组件，而是创建一个组件来包装整个组件范围，并更多地依赖CSS类来完成任务。 / p>

例如在你的情况下，我会做类似的事情：

const StyledWrap = styled.div`
  & .nav-tabs > .active > li {
    background: white;
  }

  & .nav-tabs > .active.colorize > li {
    background: orange;
  }
`
const MyCustomNavbar = (props) => {
  return (
    <StyledWrap>
      /* ... */
        <NavItem active={true} />
        <NavItem className="colorize"/>
        <NavItem active={true} className="colorize" />
      /* ... */
    </StyledWrap>
  )
}

在我看来，它是一个更清晰的模式，可以使您的组件特定CSS保持适当的范围，集中和全面。

通常，我发现每个组件范围只应用styled-components一次使事情变得简单和易于管理。当你在多个地方应用它时，你最终会做很多前缀并最终得到如下代码：

<StyledNavbar>
  <StyledNav>
    <StyledNavItem active={true} />
    <StyledNavDropdown>
      <StyledMenuItem eventKey={1.1}>Action 1</StyledMenuItem>
      <StyledMenuItem eventKey={1.2}>Action 2</StyledMenuItem>
    </StyledNavDropdown>
  </StyledNav>
</StyledNavbar>

这是一个极端的例子，但你明白了。

Answer 2

我有一些关于如何解决这个问题的建议。你可能不喜欢他们中的任何一个，因为他们不是很优雅，但是这里也是。

方法1

使用更具体的选择器覆盖样式。您知道样式组件如何利用Sass的优势吗？好吧，您可以使用它为您的选项卡创建一个至少与Bootstrap中的选择器一样的选择器。假设你造型的组件是这个等式中的li，你可以做这样的事情（hacky，我知道）。

body .nav-tabs > & {
    &.active > a {
        background-color: blue; // whatever
    }
}    

最初的&当然是指有问题的li，所以会给你一个像body .nav-tabs > li.active > a这样的选择器

方法2

稍微简单一点就是在CSS规则末尾使用!important标志的想法，如下所示：

export const TabNavItem = styled(NavItem)`
  background-color: ${props => (props.colorize ? 'orange' : 'white')} !important;
`;