问题描述
尝试使用react bootstrap创建网站,并且无法更改标题的颜色。当前,当我想将其更改为绿色时,它将作为默认的原色显示。
<header className="bg-primary">
<Container>
<Navbar expand="md" variant="dark">
<Navbar.Brand href="/">{siteTitle}</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarResponsive" />
<Navbar.Collapse id="navbarResponsive">
<Nav as="ul" className="ml-auto">
<Nav.Item as="li">
<Link to="/about" className="nav-link" activeClassName="active">About</Link>
</Nav.Item>
<Nav.Item as="li">
<Link to="/projects" className="nav-link" activeClassName="active">Projects</Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
</header>
)
我已经创建了自己的scss文件
// change the theme
$theme-colors: (
"primary": #44bb88,"danger": #44bb88,);
// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';
我也在我的代码顶部导入了该文件
import '../themes/main.scss';
尽管颜色仍然是默认的蓝色。
解决方法
无法解决问题,但我成功地更改了颜色,方法是将新颜色添加到主题颜色,然后将其设置为bg颜色。
<header className="bg-main">
$theme-colors: (
"main": #44bb88,"danger": #44bb88,);