Переопределить стили начальной загрузки только в одном экземпляре

Question

Я пытаюсь использовать 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>

)

Этот пост , кажется, рекомендует сделать идентификатор CSS следующим образом:

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

Моя цель состоит в том, чтобы удалить синий фон, который Bootstrap помещает на вкладки активных ссылок, и заменить его на цвет, который я определил, без цвета фона. Я не могу заставить этот стиль переопределить начальную загрузку.

Как ты это делаешь?

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

Надеюсь, это поможет!