在 React 项目目录中将 css reset 放在哪里

Question

希望启动一个 create-react-app（在 vscode 中）。我想使用一些基本的 css 重置代码开始清理。

问题：在项目中放置 css 重置的最佳位置是什么？

option a) in the `index.css` file auto generated via `create-react-app`

option b) in the `App.css` file auto generated via `create-react-app`

option c) any other best practice and/or recommendation

需要说明的是，默认情况下，index.css 和 App.css 位于同一目录中。

和..

App.js 植根于 index.js

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

文档说在 index.css 中重置位置。我只想确保 index.css 'cascades' 正确地下降到 App.css 给定这个结构。

Answer 1

这是官方 Create-React-App 文档推荐的内容https://create-react-app.dev/docs/adding-css-reset/

This project setup uses PostCSS Normalize for adding a CSS Reset.

To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index.css or App.css.

#index.css
@import-normalize; /* bring in normalize.css styles */
/* rest of app styles */

You can control which parts of normalize.css to use via your project's browserslist.

看起来选项 B 是最佳选择。

Answer 2

在我的 React 应用程序中，我通常维护一个主题文件夹和一个名为 global-styles.css 的文件。我将文件 app/theme/global-styles.css 用于全局/css 重置代码。

Answer 3

基本css重置可以在index.css里面。这将覆盖所有默认浏览样式，因为 index .html 是入口点文件。然后你在每个组件中写的css会层叠在这个样式之上。

最后，作为级联效果，您将覆盖默认浏览器样式并添加您的组件样式。

Answer 4

您可以删除 Index.css 文件中的所有 CSS 并添加 @import-normalize;

它基本上重置了浏览器应用的所有 CSS！

在 React 项目目录中将 css reset 放在哪里

where to put css reset in react project dir

css

reactjs

create-react-app