create-react-app项目：App.css/index.css作用及全局样式配置咨询

一、App.css 和 index.css 的作用 #

• index.css：项目的全局基础样式文件，默认在index.js中引入，负责设置整个应用的通用样式——比如清除浏览器默认的margin、padding，定义body的字体、背景色，或者给根容器#root设置布局规则，所有组件都会继承这里的样式。
• App.css：App.js组件的专属样式文件，默认在App.js中引入，主要给App组件及其内部子组件设置样式。如果没启用CSS模块化，它的样式也会影响全局（比如类名重复时），本质是作用范围更广的局部样式文件。

二、样式未生效的排查与解决 #

你给index.js相关内容设置样式没生效，先查这几点：

1. 确认文件引入是否正确：
   • 检查index.js里有没有import './index.css';这行代码，没引入的话样式肯定不生效。
   • 如果你的目标元素在App组件内部，还要确认App.js里引入了App.css：import './App.css';。
2. 样式选择器是否匹配：
   • 比如要给index.js里的根容器<div id="root"></div>设置样式，CSS里得写#root { ... }，别写错选择器，还要注意大小写（CSS选择器区分大小写）。
3. 检查样式优先级：
   • 如果其他地方的样式优先级更高（比如行内样式、更具体的选择器），会覆盖你写的样式。可以用浏览器F12开发者工具查看元素样式，看目标样式是不是被划掉了（被覆盖的标志）。

三、全局样式的配置方法 #

方法1：直接用默认的index.css #

这是最省事的方式，直接在index.css里写全局样式就行，只要index.js里保留import './index.css';，样式就会作用于整个应用。示例：

/* index.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

方法2：自定义全局样式文件 #

如果不想用默认的index.css，自己新建一个全局样式文件也可以：

1. 在src文件夹下创建global.css：

/* global.css */
body {
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #007bff;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

2. 在index.js中引入这个文件：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './global.css'; // 引入自定义全局样式
import App from './App';

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

方法3：CSS模块化或CSS-in-JS（可选） #

如果需要更精细化的样式管理，可以用create-react-app默认支持的CSS模块化（把样式文件名改成[name].module.css，比如App.module.css），或者用styled-components这类CSS-in-JS库，但全局样式还是推荐前面两种基础方法。

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