React Bootstrap选项卡自定义类无效

Question

我使用React Bootstrap TABS 组件，但是当我在此 nav> nav-link 中使用自定义的父母类指示器时，它无法正常工作。

<Tabs
       defaultActiveKey="signup_renter"
       id="uncontrolled-tab-example"
       className="mb-3 approval-details-tab"
     >
     <Tab eventKey="signup_renter" title="About Car">
        <div className="signup-renter">
            this is signup renter tab            
        </div>
     </Tab>
     <Tab eventKey="signup_host" title="Details">
         <div className="signup-host">
            this is signup host tab          
        </div>
     </Tab>
    </Tabs>

这是我的CSS父级指标：

.approval-details-tab > .nav-tabs .nav-link.active::before {
  content: "";
  background: #524eb7;
  width: 30px;
  height: 3px;
  position: absolute;
  top: 63% !important;
}

我使用 .approval-details-tab 类作为 nav> nav-tabs 的父类，但是如果没有父母类，则可以使用。但是我需要一个父级才能单独设计。

Answer 1

来自 react-bootstrap文档：：

由于React-Bootstrap不取决于Bootstrap的非常精确的版本，因此我们不使用任何随附的CSS发货。但是，使用这些组件需要一些样式表。

您包含的方式和哪些引导样式取决于您，但最简单的方法是包括CDN中的最新样式。

cdn链接：

​像这样的内部标签：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

现在，要覆盖任何类别的“ react-bootstrap”类，您必须在自定义CSS上使用“！如果您想覆盖背景颜色，请在CSS属性旁边使用“！重要”。

示例：

.approval-details-tab{
   background: #524eb7 !important;
}

为了更清楚地了解您的问题，请提及您想覆盖Bootstrap类的CSS-Property。谢谢！

Answer 2

在React中，亲子关系有些复杂。尽管React中的一个组件似乎是另一个组件的直接孩子，但是将其转换为正常HTML，但事实并非如此。例如，查看此代码

<div className="parent">
    <Tabs className="children"> 
       some other components inside
    </Tabs>
</div>

div 组件的直接父 tabs ？它不是。上面的代码被翻译成正常的HTML时，就像

<div className="parent">
   <div>
     <div className="children">
       some other components inside
     </div>
   </div>
</div>

您看到的那样大致看起来像这样，带有className 儿童的元素不再是父件的直接子。这就是为什么在React中，使用父级儿童关系为组件进行样式组件并不是一个好主意。

如果您只想因为想避免命名冲突而进行这种样式，则可以尝试 css模块

如果要读取有关 tabs 组件行为的详细信息，则可以读取源代码