reactjs - index.css 与 "create-react-app"创建的默认应用程序中的 App.css -- 有什么区别？

Question

看起来index.css更适合全局样式，而App.css仅适用于App组件 - 但App组件通常不是我的整个应用程序吗？这里的最佳实践是什么？

Answer 1

App 组件本质上是基于 React 的应用程序中最顶层的组件，所有其他组件都是该组件的子组件。所以在create-react-app中，之所以有一个App.css和一个index.css，只是为了让create-react-app可以有一个非常简单的目录结构，并且“App.css”和“index”之间没有命名冲突.css”，这样你就可以花更少的时间删除通用的东西，而花更多的时间构建你的东西​​。构建基于 React 的应用程序的最佳实践是将每个组件放在自己单独的目录中，并使用自己的 index.js 文件、index.css 文件和类似 index.test.js 的文件，或者您想要构建的测试文件。 “Index.js”是当您为某个目录调用 ES6 import 语句时在该目录中查找的第一个文件，因此您可以编写:

import HUD from './HUD'

而不是:

import HUD from './HUD/HUD.js'

因此，使用index.css只是有助于明确thisindex.css文件是用于this组件的，因为thisindex.js仅引用这个组件

这是一个基本的 React 应用程序目录结构:

src
├── App
│   ├── HUD
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   ├── index.css
│   ├── index.js
│   ├── index.test.js
│   ├── Maze
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   ├── Tile
│   │   ├── index.css
│   │   ├── index.js
│   │   └── index.test.js
│   └── TouchControl
│       ├── index.css
│       ├── index.js
│       └── index.test.js
├── index.css
└── index.js

src级别的index.css文件是放置顶级容器DOM元素CSS样式规则的好地方，因为src级别的index.js是基于React的应用程序中您告诉React以物理方式进行操作的初始位置将应用程序组件安装到容器元素上的实际 HTML DOM，类似这样，并说“root”是 JavaScript 加载之前页面上已有元素的 ID:

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

ReactDOM.render( <App />, document.getElementById('root'))