使用CSS Modules无法覆盖React-Bootstrap样式，求正确解决方式

我正在使用React-Bootstrap制作导航栏，组件代码如下：

import React from 'react';
import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import styles from './loginHeader.module.css';

const LoginHeader = () => {
  return (
    <Navbar bg="white" expand="lg">
      <Container>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link>Contact</Nav.Link>
            <Nav.Link>Request Demo</Nav.Link>
          </Nav>
          <Nav>
            <NavDropdown className={styles.sample} title="Register">
              <NavDropdown.Item>Patient</NavDropdown.Item>
              <NavDropdown.Item><Link to="/registerOwner">Owner</Link></NavDropdown.Item>
              <NavDropdown.Item>Doctor</NavDropdown.Item>
            </NavDropdown>
            <Nav.Link><Link to="/">Login </Link></Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

export default LoginHeader;

我尝试通过loginHeader.module.css覆盖下拉菜单的文字颜色，样式代码如下：

.sample{
    color: #1173bc;
    font-weight: bold; 
}

但样式并未生效，即使添加!important关键字也没用。请问如何正确使用CSS Modules覆盖React-Bootstrap的样式？

React-Bootstrap组件会渲染嵌套的内部元素（比如NavDropdown的标题对应.nav-link类，下拉选项对应.dropdown-item类），直接给容器类设置样式无法穿透到内部元素，需要针对性定位：

1. 使用CSS Modules后代选择器定位内部元素 #

在loginHeader.module.css中，通过后代选择器精准定位NavDropdown内部的目标元素：

/* 覆盖下拉菜单标题的样式 */
.sample .nav-link {
  color: #1173bc !important;
  font-weight: bold;
}

/* 覆盖下拉选项的样式 */
.sample .dropdown-item {
  color: #1173bc;
  font-weight: bold;
}

原理：.sample是给NavDropdown容器添加的类，通过它限定样式作用范围，再选中内部的.nav-link（标题）和.dropdown-item（选项）元素，即可覆盖Bootstrap的默认样式。

2. 利用bsPrefix属性自定义组件类名（推荐） #

React-Bootstrap的大部分组件支持bsPrefix属性，可替换默认的Bootstrap类名，直接用CSS Modules设置样式：

修改组件代码： #

<NavDropdown title="Register">
  <NavDropdown.Item bsPrefix={styles.dropdownItem}>Patient</NavDropdown.Item>
  <NavDropdown.Item bsPrefix={styles.dropdownItem}>
    <Link to="/registerOwner">Owner</Link>
  </NavDropdown.Item>
  <NavDropdown.Item bsPrefix={styles.dropdownItem}>Doctor</NavDropdown.Item>
</NavDropdown>

修改CSS Modules代码： #

.dropdownItem {
  color: #1173bc;
  font-weight: bold;
}

这种方式无需依赖后代选择器，样式更精准，也避免了!important的滥用。

3. 全局样式配合范围限定（应急方案） #

如果上述方法不适用，可使用全局CSS，但通过组件类限定作用范围避免全局污染：

全局CSS文件（比如global.css）： #

.loginHeader .dropdown-item {
  color: #1173bc;
  font-weight: bold;
}

组件中添加范围类： #

<Navbar className={styles.loginHeader} bg="white" expand="lg">
  {/* 其他代码不变 */}
</Navbar>

内容的提问来源于stack exchange，提问作者Basil Sajeev