我们都熟悉的标准方式 链接样式表 到 <head> 一个 HTML 文档，对吧？ 这只是我们能够编写 CSS 的几种方法之一。 但是在单页应用程序 (SPA) 中设置样式是什么样的，比如在 React 项目中？
事实证明，有几种方法可以为 React 应用程序设置样式。 有些与传统样式重叠，有些则没有那么多。 但是，让我们数一数我们可以做到的所有方法。
导入外部样式表
顾名思义，React 可以导入 CSS 文件。 该过程类似于我们如何在 HTML 中链接 CSS 文件 <head>:
- 在您的项目目录中创建一个新的 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 文件被导入到一个 App.js 来自 /Components/css 文件夹中。
编写内联样式
您可能习惯于听到内联样式对于可维护性和诸如此类的东西并不是那么好，但肯定有一些情况（这是一个！) 有意义的地方。 在 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 class 和另一个用于文本输入，其中包含类似于我们期望在外部样式表中看到的样式规则。 然后将这些对象应用于 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;使用样式组件
您已使用 样式组件? 它非常流行，允许您在 JavaScript 中使用实际的 CSS 构建自定义组件。 一个 styled-component 基本上是一个 React 组件——为它做好准备——样式。 一些功能包括独特的类名、动态样式和更好的 CSS 管理，因为每个组件都有自己独立的样式。
在命令行中安装 styled-components npm 包：
npm install styled-components接下来，将其导入 React 应用程序：
import styled from 'styled-components'创建一个组件并为其分配样式属性。 注意模板文字的使用由反引号表示 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 一样。 这为条件语句和基于状态或道具的更改样式打开了大门。
这是一个演示：
在这里，我们正在操作 div 的 display 显示状态的属性。 此状态由一个按钮控制，该按钮在单击时切换 div 的状态。 这反过来又在两种不同状态的样式之间切换。
内联 if 陈述，我们使用 ? 而不是通常的 if/else 句法。 这 else 部分在分号之后。 并记住在初始化后始终调用或使用状态。 例如，在最后一个演示中，状态应该高于 Wrapper 组件的样式。
快乐的反应造型！
这是一个包装，伙计们！ 我们研究了几种在 React 应用程序中编写样式的不同方法。 这并不是说一个人比其他人更好； 当然，您使用的方法取决于具体情况。 希望现在你已经对它们有了很好的理解，并且知道你的 React 样式库中有很多工具。
