React CSS 导入但未应用答案

【问题标题】：React CSS importing but not appliedReact CSS 导入但未应用
【发布时间】：2019-08-06 16:32:05
【问题描述】：

我在按照教程学习 React 的过程中，遇到了一个我似乎无法解决的问题。我在我的 index.js 文件中加载 .css 文件；但是，没有应用 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;
}

main.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;

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

【问题讨论】：

您知道如何为您的浏览器使用开发者工具吗？您可以确定是否应用了 CSS，例如 .content 类，方法是右键单击 DOM 中的元素以检查其 CSS 属性。 developers.google.com/web/tools/chrome-devtools/css
是的。样式被“用户代理样式表”覆盖。这是怎么回事？
哈，这意味着 CSS 没有被加载并且浏览器正在应用默认样式。你有教程的链接吗？您会将其添加到您的问题中吗？另外，你的 Webpack 配置是什么样的？

标签： css reactjs

【解决方案1】：

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

【讨论】：