React 设计模式 0x4：样式 - 成就云开发者社区

学习如何轻松构建可伸缩的 React 应用程序：样式

# 组件样式

在每个 Web 应用程序中，样式化非常重要，因为样式使其对用户非常有吸引力，并为用户提供良好的体验。在 React 中有不同的方法来实现这一点。

# 样式化类型

在 React 和网站或 Web 应用程序中，有不同的样式化应用程序的方式。这里将使用示例来介绍其中一些：

内联 CSS
外部/引用 CSS
Sass
Bootstrap
styled-components
Tailwind

# 内联 CSS

内联 CSS 是直接在 HTML 元素上编写样式：

代码语言：javascript

复制

import React from "react";
function Example() {

return (

<div style={{ color: "red", fontSize: "20px" }}>

<h1>Example</h1>

<p>This is an example component.</p>

</div>

);

}
export default Example;

优点：

无需额外的文件，容易编写
浏览器可以快速加载和应用样式

缺点：

无法重用样式
容易被覆盖
难以维护

# 外部/引用 CSS

外部 CSS 是网站或 Web 应用程序样式化的一种方式，它在文件中编写所有样式，并在应用程序或组件内引用它。

代码语言：javascript

复制

/* example.css */
.example {
  color: red;
  font-size: 20px;
}

代码语言：javascript

复制

import React from "react";
import "./example.css";
function Example() {

return (

<div className="example">

<h1>Example</h1>

<p>This is an example component.</p>

</div>

);

}
export default Example;

优点：

编写简单
保持组件干净，不会混合样式和组件
可以重用样式

缺点：

加载速度慢，因为需要加载额外的文件

# Sass

Sass（Synthetically Awesome Style Sheet）是一种预处理器，具有扩展名 .scss，有一些很棒的功能，例如：

Mixins（混入）
Inheritance（继承）
Nesting（嵌套）

可以通过以下方式安装 Sass：

代码语言：javascript

复制

npm install sass

使用：

代码语言：javascript

复制

/* example.scss */
.example {
  color: red;
  font-size: 20px;
}

代码语言：javascript

复制

import React from "react";
import "./example.scss";
function Example() {

return (

<div className="example">

<h1>Example</h1>

<p>This is an example component.</p>

</div>

);

}
export default Example;

优点：

与 CSS 相比，编写更简单

缺点：

有一定学习门槛

# Bootstrap

Bootstrap 是一种流行的开源 CSS 框架，Bootstrap 已经内置了样式和类，可以立即应用于您的应用程序。这些内置样式和类已经默认具有响应式功能，因此您不必担心它们的响应式。

可以通过以下方式安装 Bootstrap：

代码语言：javascript

复制

npm install bootstrap react-bootstrap

使用：

代码语言：javascript

复制

import React from "react";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function Example() {

return (

<div className="d-flex justify-content-center">

<Button variant="primary">Example</Button>

</div>

);

}
export default Example;

优点：

有很多内置的样式和类
有很多内置的响应式功能

缺点：

覆盖样式可能会很困难

# styled-components

styled-components 可以实现在 JavaScript 中编写样式。

可以通过以下方式安装 styled-components：

代码语言：javascript

复制

npm install styled-components

使用：

代码语言：javascript

复制

import React from "react";
import styled from "styled-components";
const Button = styled.buttoncolor: red; font-size: 20px;;
function Example() {

return (

<div>

<h1>Example</h1>

<p>This is an example component.</p>

<Button>Example</Button>

</div>

);

}
export default Example;

styled-components 可以接受 props，并用于更改样式：

代码语言：javascript

复制

import React from "react";
import styled from "styled-components";
const Button = styled.buttoncolor: ${(props) =&gt; (props.primary ? &#34;red&#34; : &#34;blue&#34;)}; font-size: 20px;;
function Example() {

return (

<div>

<h1>Example</h1>

<p>This is an example component.</p>

<Button>Example</Button>

<Button primary>Example</Button>

</div>

);

}
export default Example;

优点：

可复用
避免了类名冲突
可以使用 props 更改样式，实现动态样式
可以使用 JavaScript 语法编写样式, React 原生支持

缺点：

可能会导致性能问题

# Tailwind CSS

现在许多开发人员都使用 Tailwind CSS，因为在 React 应用程序中编写起来更快并且易于维护。Tailwind CSS 是一种实用型优先的框架，使用一种称为“原子类”的方法，通过提供大量的预定义类来帮助构建定制的、响应式的 UI 组件和页面。

可以通过以下方式安装 Tailwind CSS：

代码语言：javascript

复制

npm install tailwindcss postcss autoprefixer

npx tailwindcss init -p

使用：

代码语言：javascript

复制

import React from "react";
function Example() {

return (

<div className="flex justify-center">

<h1 className="text-4xl">Example</h1>

<p className="text-xl">This is an example component.</p>

</div>

);

}
export default Example;

# 样式规范

前面已经介绍了不同样式类型，现在我们将介绍编写样式的一些常见约定。

# BEM

BEM 是一种命名约定，它可以帮助您更好地组织样式。BEM 代表块（block）、元素（element）和修饰符（modifier），它们可以组合在一起，用于将大型界面拆分为独立的块。

块（block）：

用于描述，通常由类表示
在第一眼看上去就告诉我们该类表示什么

代码语言：javascript

复制

<div className="success"></div>

块（block）有以下规则
- 块可以嵌套
- 可以有任意数量的嵌套级别

元素（element）

用于描述块的一部分，通常由类表示
元素与块之间使用双下划线 __ 连接

代码语言：javascript

复制

<div className="form">
  <div className="form__input"></div>
</div>

修饰符（modifier）

用于描述块或元素的外观、状态或行为
修饰符与块或元素之间使用双中划线 -- 或单下划线 _ 连接

代码语言：javascript

复制

<div className="form">
  <div className="form__input form__input--error"></div>
  <div className="form__input form__input_success"></div>
</div>