React 设计模式 0x4：样式
React 设计模式 0x4：样式
学习如何轻松构建可伸缩的 React 应用程序：样式
# 组件样式
在每个 Web 应用程序中，样式化非常重要，因为样式使其对用户非常有吸引力，并为用户提供良好的体验。在 React 中有不同的方法来实现这一点。
# 样式化类型
在 React 和网站或 Web 应用程序中，有不同的样式化应用程序的方式。这里将使用示例来介绍其中一些：
- 内联 CSS
- 外部/引用 CSS
- Sass
- Bootstrap
- styled-components
- Tailwind
# 内联 CSS
内联 CSS 是直接在 HTML 元素上编写样式：
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 应用程序样式化的一种方式，它在文件中编写所有样式，并在应用程序或组件内引用它。
/* example.css */
.example {
color: red;
font-size: 20px;
}
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：
npm install sass
使用：
/* example.scss */
.example {
color: red;
font-size: 20px;
}
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：
npm install bootstrap react-bootstrap
使用：
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：
npm install styled-components
使用：
import React from "react";
import styled from "styled-components";
const Button = styled.button`
color: 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，并用于更改样式：
import React from "react";
import styled from "styled-components";
const Button = styled.button`
color: ${(props) => (props.primary ? "red" : "blue")};
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：
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p
使用：
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）：
- 用于描述，通常由类表示
- 在第一眼看上去就告诉我们该类表示什么
<div className="success"></div>
- 块（block）有以下规则
- 块可以嵌套
- 可以有任意数量的嵌套级别
元素（element）
- 用于描述块的一部分，通常由类表示
- 元素与块之间使用双下划线
__连接
<div className="form">
<div className="form__input"></div>
</div>
修饰符（modifier）
- 用于描述块或元素的外观、状态或行为
- 修饰符与块或元素之间使用双中划线
--或 单下划线_连接
<div className="form">
<div className="form__input form__input--error"></div>
<div className="form__input form__input_success"></div>
</div>腾讯云开发者
