导航栏未加载背景颜色答案

【问题标题】：NavBar Isn't Loading Background Color导航栏未加载背景颜色
【发布时间】：2022-02-25 23:01:30
【问题描述】：

SOLUTION 来自用户（Someone Special）：我需要导入引导 css

import 'bootstrap/dist/css/bootstrap.css';

我有以下代码，更改 bg="dark" 或 "light" 没有任何作用。我正在尝试向 (https://react-bootstrap.github.io/components/navbar/) 学习。但是，由于某种原因，我无法更改 NavBar 组件的背景颜色。

import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap';

export class Header extends Component {
  render() {
    return ( 
    <div className="App"> 
  <Navbar  bg="dark" variant="dark">
    <Navbar.Brand>
      Evolve
    </Navbar.Brand>
  </Navbar>
    </div>
        )
  }
}

export default Header;

如果我创建自己的 CSS 就可以了

header.js：

import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap';

export class Header extends Component {
  render() {
    return ( 
    <div className="App"> 
  <Navbar  bg="nvBr" variant="dark">
    <Navbar.Brand>
      Evolve
    </Navbar.Brand>
  </Navbar>
    </div>
        )
  }
}

export default Header;

CSS：

.App {
  height: 1rem;
}


.bg-nvBr {
  background: crimson;
}

所以，我想问题真的是为什么 bg="dark" 不能像我应该的那样工作？

【问题讨论】：

你导入了引导 css 吗？
就是这样！ 5 5 5

标签： reactjs jsx react-bootstrap

【解决方案1】：

在您的导航栏上试试这个：

<Navbar className="bg-dark">

【讨论】：

【解决方案2】：

来自用户的解决方案（某人特别）：我需要导入引导 css

import 'bootstrap/dist/css/bootstrap.css';

【讨论】：