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

希望有帮助！

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

1 个答案: