使用 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>
    );
  }

标签未激活时颜色正常：

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

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

Answer 1

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

方法一

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

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

开头的&当然指的是有问题的li，所以会给你一个像body .nav-tabs > li.active > a

这样的选择器

方法二

在 CSS 规则末尾使用 !important 标志的想法更简单一些，如下所示：

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

Answer 2

我通常不会将 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>

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

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

Overwriting nested styles in React Bootstrap using Styled-Components

css

twitter-bootstrap

reactjs

react-bootstrap

styled-components

方法一

方法二