React CSS 模块 - 无效的优先顺序

问题描述

我一直在开发一个简单的 React 应用程序，为此我需要 Bootstrap 库。所以一开始，我是在index.js文件的顶部导入的。

index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
import '@fortawesome/fontawesome-free/css/solid.min.css';
import App from './App';

然后我创建了一个 CSS 模块文件并尝试覆盖默认的导航链接样式：

Menu.module.css:
.language {
    background: transparent;
    border: none;
    cursor: pointer;
}

Menu.js:
import styles from './Menu.module.css';
...
<li className="nav-item">
    <button className={`nav-link mr-3 h5 ${styles.language}`} onClick={() => doSomething()}>
        <i aria-hidden="true" className="fas fa-exchange-alt"/> {locale.language}
    </button>
</li>

如下所示，我的样式被默认设置覆盖。所以完全相反。

问题很简单。我可以添加重要的修饰符或创建一个单独的 css 文件（没有模块化）并覆盖这些规则。老实说，这些看起来像是一种解决方法，而不是真正的解决方案。那么在 React 组件中覆盖默认 Bootstrap 样式的推荐方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）