React项目导入index.css样式未生效问题求助

我正在跟随YouTube上的ReactJS教程学习，教程要求将CSS代码复制到index.css并导入后即可正常渲染页面样式，但完成操作后样式并未生效。请问该如何解决？是否是React版本差异导致样式写法不同？还是我遗漏了相关配置？

我的代码文件 #

index.css #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
}

.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-block {
  display: block;
  width: 100%;
}

.task {
  background: #f4f4f4;
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

.task.reminder {
  border-left: 5px solid green;
}

.task h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-form {
  margin-bottom: 40px;
}

.form-control {
  margin: 20px 0;
}

.form-control label {
  display: block;
}

.form-control input {
  width: 100%;
  height: 40px;
  margin: 5px;
  padding: 3px 7px;
  font-size: 17px;
}

.form-control-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-control-check label {
  flex: 1;
}

.form-control-check input {
  flex: 2;
  height: 20px;
}

footer {
  margin-top: 30px;
  text-align: center;
}

Index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

App.js #

import Header from "./components/Header";
import Tasks from "./components/Tasks";
import './index.css';


function App() {
  return (
    <div className="Container">
      <Header title='Orpheus Research'/>
      <Tasks />
    </div>
  );
}

export default App

问题排查与解决 #

1. 核心问题：类名大小写不匹配
   你已经注意到了：App.js中使用的className="Container"是大写首字母，而index.css中定义的类选择器是.container（小写首字母）。CSS类选择器是大小写敏感的，这直接导致样式无法匹配到对应元素。把App.js里的Container改成container就能解决大部分样式不生效的问题。

2. 其他可能的排查点

   • 检查CSS导入路径：确认index.css文件和App.js、Index.js在同一目录下，导入语句import './index.css'的路径正确。如果文件位置变动，要对应调整路径。
   • React版本不影响全局CSS导入：不管是React 18还是更早的版本，全局CSS的导入方式在Create React App项目中都是一致的，版本差异不是这个问题的原因。
   • 排查样式冲突：打开浏览器开发者工具（F12），选中目标元素查看样式面板，看是否有其他样式覆盖了你写的规则（被划掉的样式表示被优先级更高的规则覆盖）。
   • 清除浏览器缓存：有时候浏览器会缓存旧的CSS文件，强制刷新页面（Ctrl+F5 / Cmd+Shift+R）可以加载最新的样式。

内容的提问来源于stack exchange，提问作者Han Qin