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

Posted 2023-02-22

【中文标题】使用 Styled-Components 在 React Bootstrap 中覆盖嵌套样式

【英文标题】：Overwriting nested styles in React Bootstrap using Styled-Components

【发布时间】：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:

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

【参考方案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;
`;