使用Styled-Components在React Bootstrap中覆盖嵌套样式

Question

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

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

我只是不确定如何使用样式组件来定位此样式.我尝试过从官方文档中尝试不同的想法,但一直没能使它工作.

我的风格组件:

 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类来完成任务.

例如,在你的情况下,我会做类似的事情:

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>

这是一个极端的例子,但你明白了.