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

【问题标题】：Overwriting nested styles in React Bootstrap using Styled-Components使用 Styled-Components 在 React Bootstrap 中覆盖嵌套样式
【发布时间】：2018-04-29 07:55:28
【问题描述】：

我正在使用带有 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>
    );
  }

标签页不活动时颜色可以正常工作：

When tab is active, color is covered by Bootstrap styles:

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

【问题讨论】：

标签： css twitter-bootstrap reactjs react-bootstrap styled-components

【解决方案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>

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

【讨论】：

【解决方案2】：

对于如何解决此特定问题，我有一些建议。你可能不喜欢它们中的任何一个，因为它们都不是很优雅，但是就这样吧。

方法 1

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

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;
`;

【讨论】：