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

Question

我试图弄清楚如何在引导程序中自定义我的标题颜色，但我不确定如何这样做。 通常我在 react 中使用 css 模块来自定义我的元素 [所以我会import classes from './header.module.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">

我的尝试：

头文件.js

上面的 react Header.js 脚本。 我知道我应该引用 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>