我们都熟悉将 样式表链接 到 HTML 文档的 <head> 的标准方法，对吧？这只是我们能够编写 CSS 的几种方法之一。但是，在单页面应用程序 (SPA) 中，例如在 React 项目中，样式化事物是什么样子的呢？
事实证明，有几种方法可以为 React 应用程序设置样式。有些与传统样式重叠，有些则不太多。但是让我们列举所有我们可以做到的事情。
导入外部样式表
顾名思义，React 可以导入 CSS 文件。此过程类似于我们在 HTML <head> 中链接 CSS 文件的方式。
- 在您的项目目录中创建一个新的 CSS 文件。
- 编写 CSS。
- 将其导入 React 文件。
像这样
import "./style.css";这通常位于文件顶部，其他导入发生的地方。
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;在此示例中，CSS 文件从 /Components/css 文件夹导入到 App.js 中。
编写内联样式
您可能习惯于听到内联样式对于可维护性等方面并不是那么好，但肯定有一些情况（这里有一个！）在其中它是有意义的。并且在 React 中，可维护性问题不太严重，因为 CSS 通常已经位于同一个文件中。
这是一个在 React 中使用内联样式的超级简单的示例
<div className="main" style={{color:"red"}}>不过，更好的方法是使用对象。
- 首先，创建一个包含不同元素样式的对象。
- 然后使用
style属性将其添加到元素中，然后选择要设置样式的属性。
让我们在上下文中看看
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;此示例包含一个 styles 对象，其中包含两个其他对象，一个用于 .main 类，另一个用于文本输入，其中包含类似于我们期望在外部样式表中看到的样式规则。然后将这些对象应用于返回的标记中元素的 style 属性。
请注意，引用样式时使用花括号，而不是我们在普通 HTML 中通常使用的引号。
使用 CSS 模块
CSS 模块……那些发生了什么事，对吧？它们具有局部作用域变量的优点，并且可以与 React 一起使用。但它们到底是什么呢？
引用 存储库的文档
CSS 模块的工作原理是将单个 CSS 文件编译成 CSS 和数据。CSS 输出是正常的全局 CSS，可以直接注入到浏览器中或连接在一起并写入文件以供生产使用。数据用于将您在文件中使用的可读名称映射到全局安全的输出 CSS。
简单来说，CSS 模块允许我们在多个文件中使用相同的类名而不会发生冲突，因为每个类名都具有唯一的编程名称。这在大型应用程序中特别有用。每个类名都在其导入的特定组件中局部作用域。
CSS 模块样式表类似于常规样式表，只是扩展名不同（例如 styles.module.css）。以下是它们是如何设置的
- 创建一个以
.module.css作为扩展名的文件。 - 将该模块导入 React 应用程序（如我们之前所见）。
- 将
className添加到元素或组件，并引用从导入的样式中引用的特定样式。
超简单的例子
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;使用 styled-components
您是否使用过 styled-components？它非常流行，允许您使用 JavaScript 中的实际 CSS 构建自定义组件。styled-component 本质上是一个 React 组件，其中包含——准备好——样式。一些功能包括唯一类名、动态样式和更好的 CSS 管理，因为每个组件都有自己的单独样式。
在命令行中安装 styled-components npm 包。
npm install styled-components接下来，将其导入 React 应用程序。
import styled from 'styled-components'创建一个组件并为其分配一个 styled 属性。请注意 Wrapper 对象中反引号表示的模板文字的使用。
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;上面的 Wrapper 组件将呈现为包含这些样式的 div。
条件样式
styled-components 的优点之一是组件本身是功能性的，就像您可以在 CSS 中使用 props 一样。这为条件语句和根据状态或 prop 更改样式打开了大门。
这是一个展示它的演示
在这里，我们正在根据显示状态操作 div 的 display 属性。此状态由一个按钮控制，该按钮在单击时切换 div 的状态。这反过来又会在两种不同状态的样式之间切换。
在内联 if 语句中，我们使用 ? 而不是通常的 if/else 语法。else 部分在分号之后。并记住在状态初始化后始终调用或使用状态。例如，在最后一个演示中，状态应该位于 Wrapper 组件的样式之上。
快乐的 React 样式！
好了，朋友们！我们查看了在 React 应用程序中编写样式的几种不同方法。并且不像其中一种比其他任何一种都好；您使用的方法当然取决于具体情况。希望现在您已经对它们有了很好的了解，并且知道您在 React 样式工具库中有很多工具。
谢谢。
不错的总结！
也应该提到 Tailwind 和 SCSS 模块。
Tailwind 是一个库，而不是一种语言。
不包含它是有道理的。
是的，当您使用 Tailwind 时，您实际上并没有编写 CSS……但谁在乎呢，使用 Tailwind，它比所有这些解决方案都要好 lol。
本文包含一些错误和不准确之处，会导致新手出错。
导入 CSS 或 CSS 模块不是 React 的功能，只有在您使用配置为支持它的框架或自己设置它时才会起作用。
这一点很重要。
事实上，React 既不是编程语言也不是框架。它只是一个用于帮助渲染实时 (HTML) UI 的 JavaScript 库。React 只是齿轮工作中的一小部分，样式选项是另一个单独的齿轮。
CSS 模块示例导出
.font，但 JSX 代码使用.heading。对于任何缺乏 CSS 模块行为先验知识的人来说，这都会令人困惑。Styled 组件永远不应在另一个组件的渲染函数内定义/构造。（事实上，任何组件都不应该。）这会导致性能低下和非常不可预测的渲染行为。
您好，
感谢您的提示
是的，我应该更详细地解释一下你提到的前两点。
关于样式组件，我道歉，那是一个错误，现在已经更正了。
谢谢
不错。我使用了 Styled Components 并且很喜欢它。它结合了 SCSS 和 Javascript 的强大功能，但仍然使用正常的 CSS 语法。
值得一提的是，React 团队现在不建议使用 CSS-in-JS 了。
https://github.com/reactwg/react-18/discussions/110
“我们首选的解决方案是使用静态提取样式，并使用普通内联样式来处理动态值。例如：
<div style={{...}}>。”但是，您可以构建一个 CSS-in-JS 库，该库使用编译器将静态规则提取到外部文件中。这就是我们在 Facebook 使用的方法。
使用动态生成的样式表很诱人，因为它只包含页面上当前活动的规则。但是，这样做是有代价的。通常以运行时成本为代价。它还会带来频繁插入新规则的成本，这会使许多已经完成的工作失效。
共享样式表解析效率高且易于缓存。通过将它们提取到共享样式中，您实际上是在预先批量处理大量工作。这使您能够避免在用户开始与页面交互时再进行这些工作。
出于公平起见，作为一名 CSS 开发人员，我请求添加一个 JS in CSS 功能。
我也想能够乱搞另一种我不会写的语言。