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

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

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

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>

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