Reactjs 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>

Menu.module.css：
.语言{
背景：透明；
边界：无；
光标：指针；
}
Menu.js：
从“./Menu.module.css”导入样式；
...

doSomething（）}>
{locale.language}

正如您在下面看到的，我的样式被默认值覆盖。所以完全相反的情况发生了

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