何时在 React 中使用 CSS 和 JSX 样式

Question

我正在学习 React，并意识到您可以通过导入 CSS 文件来使用真正的 CSS，也可以使用具有使用驼峰案例的类似 CSS 代码的 JS。

\n

纯 CSS 示例：import './AppStyle.css'其中包含background-color: black;

\n

JS版本示例：const AppStyle = { backgroundColor: "black" }

\n

哪一种更好用，为什么？或者也许他们\xe2\x80\x99都很好？

\n

Answer 1

• 编写 CSS 可以发挥 CSS 的所有优点（如选择器、媒体查询）。
• 在内联样式中，您编写的是类似对象的样式，而不是实际的 CSS。
• 内联样式实现中代码可读性最差，而使用 CSS 管理样式则易于维护。
• 内联样式在 DOM 中占用更多空间，因为所有样式都是与 DOM 元素一起在内部定义的，而 CSS 是单独描述的，因此在编译文件时不会给编译器带来任何问题。