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>

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

3 个答案: