Question

我的导航栏没有改变颜色。 Navbar.jsx文件中是否有正确的Navbar.css文件路径？

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

class Navbar extends Component {
render() {
    return (
        <nav className="navbar navbar-toggleable-md">
                <button className="navbar-toggler navbar-toggler-right"     type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-   controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                 </button>
                 <div className="container">
                 <Link className="navbar-brand" to="/">Aquastars New    Website</Link>
                  <div className="collapse navbar-collapse"    id="navbarCollapse">
                    <ul className="navbar-nav ml-auto">
                    <li className="nav-item active">
                        <Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link" to="/about">About</Link>
                    </li>
                </ul>
                </div>
            </div>
            </nav>
    );
  }
 }

 export default Navbar;

下面是应用程序的结构

下面是.css文件的代码

.navbar-brand {
color: rgb(197, 21, 21);
}

a {
color: #aaa;
font-weight: 200;
}

下面是我的标题中的内容。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<title>React App</title>
 </head>

Answer 1

我仍在学习React，但您可能想尝试import * as styles from './styles.css'，并使用特定的课程className={styles.yourClass}

Answer 2

我设法通过重新启动服务器来解决它。由于某些原因，更改未从CSS文件中保留下来。所以我控制C停止服务器，然后重新启动它。

npm start

我的Navbar.css没有更改我的Navbar.jsx

2 个答案: