React：如何更改导航栏的颜色？

Question

我试图弄清楚如何在引导程序中自定义我的标题颜色，但我不确定如何去做。通常我使用css模块来定制我的元素[所以我会导入类似import classes from './header.module.css'的东西]，但我想尝试使用引导程序。如何更改元素的颜色，如下所示：

import React from 'react';
import { Link } from 'react-router-dom';
import { auth } from '../services/firebase';
import "./header.css"; //*****THIS IS WHERE I IMPORT header


function Header() {
  return (
    <header>
      <nav className="navbar navbar-expand-md navbar-light bg-light">
        <Link className="navbar-brand" to="/">PitaPal</Link>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
          {auth().currentUser
            ? <div className="navbar-nav">
              <Link className="nav-item nav-link" to="/home">Home</Link>
   
              <button className="btn btn-primary" onClick={() => auth().signOut()}>Logout</button>
            </div>
            : <div className="navbar-nav">
              <Link className="nav-item nav-link" to="/login">Sign In</Link>
              <Link className="nav-item nav-link" to="/signup">Sign Up</Link>
            </div>}
        </div>
      </nav>
    </header>
  );
}

export default Header;

我的理解是我应该通过以下方式传递自定义颜色：

.navbar-custom {
    background-color: #ff5500;
}
<nav class="navbar navbar-expand-sm navbar-custom">

我的尝试：

header.js

上面的 react Header.js 脚本。我知道我应该引用 css 文件，但不确定如何。

header.css

.navbar-custom {
    background-color: #ff5500;
}

Answer 1

我认为应该这样做。

import React from 'react';
import { Link } from 'react-router-dom';
import { auth } from '../services/firebase';
import './style.css';

function Header() {
  return (
    <header>
      <nav className="navbar navbar-expand-md navbar-custom">
        <Link className="navbar-brand" to="/">PitaPal</Link>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
          {auth().currentUser
            ? <div className="navbar-nav">
              <Link className="nav-item nav-link" to="/home">Home</Link>
   
              <button className="btn btn-primary" onClick={() => auth().signOut()}>Logout</button>
            </div>
            : <div className="navbar-nav">
              <Link className="nav-item nav-link" to="/login">Sign In</Link>
              <Link className="nav-item nav-link" to="/signup">Sign Up</Link>
            </div>}
        </div>
      </nav>
    </header>
  );
}

你的样式文件./style.css应该包含

.navbar-custom {
    background-color: #ff5500;
}

Answer 2

另一种选择是创建一个新类并添加一个“重要”标签，如下所示：

.background-navbar {
  background-color: #9ba4b4 !important;
}

Answer 3

Bootstrap 为您提供了一些预配置的类来设置背景样式，例如 bg-dark 或 bg-primary：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar bg-dark">
  <h1>
    Navbar
  </h1>
</nav>

<nav class="navbar bg-primary">
  <h1>
    Navbar
  </h1>
</nav>

但您也可以创建自定义背景颜色类：

.bg-custom-red {
  background-color: #ff5500;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar bg-custom-red">
  <h1>
    Navbar
  </h1>
</nav>

或者只是覆盖 Bootstrap 中的默认设置：

nav.bg-primary {
  background-color: #ff5500!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar bg-primary">
  <h1>
    Navbar
  </h1>
</nav>