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

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之类的内容,或者您​​希望构建测试文件.当您为该目录调用ES6 import语句时,"Index.js"是目录中查找的第一个文件,因此您可以编写:

import HUD from './HUD'

代替:

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

所以使用index.css只是有助于明确这个 index.css文件是针对这个 Component的,因为这个 index.js只引用了这个 Component

这是一个基本的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实际安装App组件到实际的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'))