仅在一个实例中覆盖引导样式

Question

我正在尝试在我的应用中使用引导程序 (react-bootstrap)。

我想按如下方式使用标签导航栏：

  <Tab.Container id="left-tabs-example" defaultActiveKey="first">
    <Row>
        <Col sm={3}>
            <Nav variant="pills" id="bootstrap-overrides .nav-pills .nav-link.active" className="flex-column">
            <Nav.Item>
                <Nav.Link eventKey="first">Tab 1</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="second">Tab 2</Nav.Link>
            </Nav.Item>
            </Nav>
        </Col>
        <Col sm={9}>
            <Tab.Content>
            <Tab.Pane eventKey="first">
            </Tab.Pane>
            <Tab.Pane eventKey="second">
            </Tab.Pane>
            </Tab.Content>
        </Col>
    </Row>
  </Tab.Container>
</div>

)

This post 似乎建议创建一个 css id 如下：

#bootstrap-overrides .nav-pills .nav-link.active {
    background-color: none;
    color: $Hand3;
}

我的目标是删除引导程序放在选项卡活动链接上的蓝色背景，并将其替换为我定义的没有背景颜色的颜色。我无法让这种样式覆盖引导程序。

你是怎么做到的？

Answer 1

如果您知道以后不需要覆盖自定义颜色，您可以这样做：

.nav-link.active {
  background-color: none !important;
  color: 'your-color' !important;
}

然后您可以删除 id="bootstrap-overrides .nav-pills .nav-link.active"，因为它不再需要。

另外，请确保您的 custom.css 文件是必需的/已在组件文件中导入。

require('./custom.css'); 或 import './custom.css';

希望有帮助！