css - React CSS 导入但未应用

Question

我在按照教程学习 React 的过程中，遇到了一个似乎无法解决的问题。我正在将 .css 文件加载到我的 index.js 文件中；但是，未应用 CSS。 css 文件确实存在并且位于正确的位置。事实上，当网页启动时，对 css 文件的更改会触发页面更新(所以我知道它正在加载)。

我的 index.js:

import React from "react";
import ReactDOM from "react-dom";
import Main from "./main";

import "./index.css";
 
ReactDOM.render(
  <Main/>,
  document.getElementById("root")
);

index.css:

body {
  background-color: yellow;
  padding: 20px;
  margin: 0;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #111;
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}

主要.js:

import React, { Component } from "react";
import {Route,NavLink,HashRouter} from "react-router-dom";
import Home from "./home";
import Stuff from "./stuff";
import Contact from "./contact";
 
class Main extends Component {
  render() {
    return (
        <HashRouter>
          <div>
            <h1>Simple SPA</h1>
            <ul className="header">
              <li><NavLink exact to="/">Home</NavLink></li>
              <li><NavLink to="/stuff">Stuff</NavLink></li>
              <li><NavLink to="/contact">Contact</NavLink></li>
            </ul>
            <div className="content"> 
              <Route exact path="/" component={Home}/>
              <Route path="/stuff" component={Stuff}/>
              <Route path="/contact" component={Contact}/>            
            </div>
          </div>
    </HashRouter>
    );
  }
}
 
export default Main;

使用不同的浏览器、清除缓存等都不能解决问题。感谢您的帮助。

Answer 1

发现问题。我从网站上复制了样式，在样式属性前面创建了一个奇怪的隐藏字符。删除了这些字符，所有字符都按设计工作。