使用 Next.JS 覆盖 React-Bootstrap css 有点麻烦

Question

情况是这样的。我试图在 react-bootstrap 中覆盖 NavBar 组件的默认 bootstrap 样式。我正在尝试更改背景颜色和文本颜色。

目前，背景颜色正确地变为黑色，但是，前景文本颜色没有变为白色，如在 scss 文件中指定的那样。

这是我返回到布局组件的导航组件文件（包含 bootstrap 导航栏）

import {NavDropdown, Navbar, Nav} from 'react-bootstrap' 
import 'bootstrap/dist/css/bootstrap.min.css'
import styles from '../styles/Navigation.module.scss'


    const Navigation = () => {
        return (
            <div>
                <Navbar className={styles.navbar}>
                    <Nav className={styles.nav}>
                        <Nav.Link href="/">Home</Nav.Link>
                        <Nav.Link href="/instructions">How to Use</Nav.Link>
                        <Nav.Link href="/donate">Donate</Nav.Link>
                        <Nav.Link href="/changelog">Changelog</Nav.Link>
                        <Nav.Link href="/feedback">Feedback</Nav.Link>
                        <NavDropdown title="Compositional Toolkit">
                            <Nav.Item>More Tools Coming Soon!<br/>Click here to be emailed notifications!</Nav.Item>
                        </NavDropdown>
                    </Nav>
                </Navbar>
    
            </div>
        )
    }
    
    export default Navigation

这里是 Navigation.module.sass 文件

.navbar {
    background: #000;
    .nav {
        color: #fff;
    }
}

可能只是我遗漏了一些愚蠢的东西，但如果我做错了这一切，请告诉我是否有更好的方法来做到这一点，我对使用所有这些仍然很陌生框架和东西都放在一起，所以如果这是一个简单的业余问题，我深表歉意。

在此先感谢您的帮助！

Answer 1

您定义了 Nav 组件的颜色。将 Nav.Link 的颜色设置为白色即可解决问题。

Answer 2

除了在 Nav.Link 上设置颜色（按照 ), it appears to be an issue of CSS specificity 的建议。您可以尝试这样做：

color: #fff !important;

此外，您可以尝试使用 <Navbar bg="dark">。如果您不喜欢默认的灰色，那么您可以轻松地覆盖它们，因为您已经在您的项目中使用 SCSS。参考：Theming Bootstrap

我想强调的另一件事是，在 _app.jsx if you are using it in your whole website. And, wrap your Nav.Links in next/link 中导入 Bootstrap 样式，如下所示：

<Link href="/" passHref>
    <Nav.Link>Home</Nav.Link>
</Link>

使用 Next.JS 覆盖 React-Bootstrap css 有点麻烦

Having a little trouble overriding React-Bootstrap css using Next.JS

sass

reactjs

react-bootstrap

bootstrap-4

next.js