反应CSS导入但未应用

我在学习反应的过程中，随着一个教程，我遇到了一个我似乎无法回避的问题。我正在我的index.js文件中加载.css文件；但是，没有应用css。css文件确实存在并且位于正确的位置。事实上，当网页启动时，对css文件进行更改会触发页面更新（因此我知道它正在加载）

My index.js：

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

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

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;

import React，{Component}来自“React”；
从“react router dom”导入{Route，NavLink，HashRouter}；
从“/Home”导入主页；
从“/Stuff”导入内容；
从“/Contact”导入联系人；
 
类主扩展组件{
render（）{
返回(
        
简单水疗

家
东西
触点

           
                          
          
        
    );
  }
}
 
导出默认主；

---

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

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

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

您知道如何使用浏览器的开发人员工具吗？通过右键单击DOM中的元素以检查其CSS属性，可以确定CSS是否应用于

.content

类。对样式被“用户代理样式表”覆盖。这是怎么回事？哈，这意味着CSS没有被加载，浏览器正在应用默认样式。你有教程的链接吗？你能把这个加到你的问题上吗？另外，你的网页配置是什么样子的？你知道如何使用浏览器的开发工具吗？通过右键单击DOM中的元素以检查其CSS属性，可以确定CSS是否应用于

.content

类。对样式被“用户代理样式表”覆盖。这是怎么回事？哈，这意味着CSS没有被加载，浏览器正在应用默认样式。你有教程的链接吗？你能把这个加到你的问题上吗？另外，你的网页配置是什么样子的？

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;