时间戳

首页 > 解决方案 > React：如何更改导航栏的颜色？

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

问题描述

我试图弄清楚如何在引导程序中自定义我的标题颜色，但我不确定如何去做。通常我使用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 文件，但不确定如何。

头文件.css

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

标签： javascriptcssreactjstwitter-bootstrap

解决方案

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

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

推荐阅读