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文件是用于此组件，因为 this index.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将App Component挂载到容器元素上的实际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'))

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

1 个答案: