2023年的React样式化方法汇总

2 年 ago
宇, 华
4 minutes

首先

你好！我是岩间正，是在ツクリンク担任Web应用工程师的。

在Tsuclink公司，我们目前正在考虑前端的后端架构。

所以，这次我们总结了在首选候选React中的样式化方法。

候选名单

我在Google上搜索了一下，也问了ChatGPT，找出了几个候选。

    1. CSS Modules (CSS模块化)

 

    1. Sass/SCSS (Sass/SCSS样式预处理器)

 

    1. CSS-in-JS (CSS在JavaScript中使用)

 

    1. Inline Styles (内联样式)

 

    CSS Frameworks (CSS框架)

CSS模块

CSS模块化是一种实现CSS模块化和封装的技术。
使用CSS模块化，样式表会以组件为单位进行封装，可以避免样式冲突和命名空间问题。

【主要特点和优点】

    1. 本地作用域：每个组件都属于本地作用域，因此即使在不同组件中使用相同的类名，样式也不会发生冲突。

避免名称冲突：通常的CSS在全局范围内定义类名，可能会导致名称冲突，但是CSS模块会自动生成唯一的类名来避免名称冲突。

样式的重用：可以在CSS模块中定义样式，并在不同的组件中重用。这样可以减少代码重复，提高代码维护性。

清晰的代码：样式和组件定义在相邻位置，使代码更易读，也更容易理解样式的目的和意图。

[实施案例] ànlì)

.button {
  background-color: blue;
  color: white;
}

import React from 'react';
import styles from './styles.module.css';

const MyButton = () => {
  return (
    <button className={styles.button}>
      Click Me
    </button>
  );
}

export default MyButton;

Sass/SCSS ->Sass/SCSS (只需要一种选择)

使用Sass（Syntactically Awesome Style Sheets）或SCSS（Sassy CSS）进行样式设定的方法可以扩展普通的CSS，实现更高效的样式描述。

[主要特点与优势]

    1. 使用变量: 可以定义变量来存储样式属性和颜色代码，便于在多个地方使用相同的值，并更容易保持样式的一致性。

嵌套: 支持样式的嵌套，可以简洁地描述嵌套在父元素内的子元素的样式，使CSS的层次结构保持简单并提高可读性。

混合: 可以将常见的样式集合抽象化并在需要的地方重复使用，减少代码重复并提高可维护性。

运算: 支持算术运算，可以对样式属性进行计算。

导入: 可以将样式表文件分割，并导入部分文件，增加项目中样式的模块化和可重用性。

适用于规模: 在大型项目中使用Sass/SCSS可以更轻松地整理和管理样式，并有助于团队合作。

实时编译: 提供了许多工具来实时编译Sass/SCSS文件，可以立即查看更改，加快开发过程。

可扩展性: 作为对CSS的扩展提供，很容易与现有的CSS代码集成，并逐步引入。

[implementation example] – [实施例] lì)

.custom-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken(#007bff, 10%);
  }
}

import React from 'react';
import './Button.module.scss';

const Button = () => {
  return (
    <button className="custom-button">Click Me</button>
  );
};

export default Button;

CSS-in-JS可以被简单地理解为将CSS样式直接嵌入到JavaScript代码中。

CSS in JS 是一种在 JavaScript 代码中定义和应用 CSS 样式的方法。它使用 JavaScript 对象来定义 CSS 样式，而不是传统的 CSS 文件，然后在基于组件的应用程序和框架中应用这些样式。

为了实现这个目标，有几种方法可供选择，我们这次选择了代表性的几种。

ChatGPT提出的候选项

    • Styled-components

 

    • Emotion

 

    • JSS(JavaScript Style Sheets)

 

    • Glamorous

 

    • Aphrodite

 

    Linaria

从npm trands获取

image.png
image.png

根据上述结果，我们将关注前三名，在这些项目中，既有维护也有多位用户。Emotion作为后来新出现的项目，追赶的速度令人惊叹。

顺便提一下，在截至2021年的使用率统计网站上，Styled-components排名首位，而Emotion排名第四。

 

image.png

我們將介紹從這裡挑選出來的事物。

样式组件

Styled-components 是一個流行的 CSS in JS 库，它使用 JavaScript 的模板字符串來定義 CSS 样式，并应用于 React 组件。

 

[主要特点和优点]

    1. 组件化样式：通过将组件与样式关联起来，在基于组件的应用程序中可以有效地封装样式。

使用JavaScript进行样式定义：可以直接在JavaScript中嵌入CSS，并使用变量和条件语句动态修改样式。

CSS共享和重用：可以将样式定义为组件，并包装为可重用的样式组件。

管理样式的优先级：可以自动管理样式的优先级，防止CSS冲突和名称冲突。

性能优化：提供了性能优化功能，如服务器端渲染和代码分割。不需要的样式被删除，从而提高页面加载速度。

自动添加前缀：自动生成厂商前缀，确保跨浏览器的兼容性。

调试支持：与调试工具集成，开发人员可以更容易地发现样式问题。

[示例实施]

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

const Button = ({ label, onClick }) => {
  return (
    <StyledButton onClick={onClick}>{label}</StyledButton>
  );
};

export default Button;

情感

Emotion是一個性能優先的CSS in JS庫，用於支持React應用程序的樣式化。

 

主要特点和优势

    1. 高性能: 在编译CSS样式时生成优化输出，注重性能。生成的样式经过最小化CSS和消除重复等优化，提高页面加载速度。

动态样式: 可以使用JS定义样式，轻松处理动态样式，并使用条件语句和变量来控制样式。

组件化样式: 将组件与样式结合起来，推进组件化样式（样式的封装）。

样式的可重用性: 可以将样式抽象为可重用的函数或组件，从而方便共享样式，减少代码重复。

自动生成CSS前缀: 自动生成供应商前缀，确保跨浏览器兼容性。

支持服务器端渲染（SSR）: 支持服务器端渲染，提高初始显示性能。

与移动应用集成: 可与React Native等移动应用开发集成，提供一致的样式处理方法。

支持调试: 与调试工具配合，提供调试信息以便更容易确定样式问题。

从外观上看，它与Styled-components非常相似。

【示例实现】

import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

const Button = () => {
  return (
    <button css={buttonStyle}>Click me</button>
  );
};

export default Button;

JSS（JavaScript样式表）

JSS（JavaScript Style Sheets）是一种CSS in JS库，它是在JavaScript内定义和应用样式的方法之一。

 

【主要特征与优点】

    1. 动态样式：在JS中定义样式，使得动态样式更容易。可以使用变量和条件语句来根据组件的状态来改变样式。

组件作用域：将样式与组件关联，确保样式不会影响其他组件（样式的封装）。

样式的重用：样式可以定义为可重用的类或对象，从而使样式的共享和维护更容易。

支持服务器端渲染（SSR）：支持服务器端渲染，提高初始显示的性能。提供一致的样式，以供客户端和服务器使用。

自动生成供应商前缀：自动生成供应商前缀以确保跨浏览器的兼容性。

性能优化：提供优化样式的功能，以排除不必要的样式。

支持动画：更容易定义动画样式，并帮助使用JS控制动画。

支持调试：提供调试信息，与工具集成以更轻松地识别样式问题。

[实施示例] lì)

import React from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';

jss.setup(preset());

const styles = {
  button: {
    backgroundColor: '#007bff',
    color: '#fff',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',

    '&:hover': {
      backgroundColor: '#0056b3',
    },
  },
};

const { classes } = jss.createStyleSheet(styles).attach();

const Button = () => {
  return (
    <button className={classes.button}>Click me</button>
  );
};

export default Button;

内联样式

React的内联样式（Inline Styles）是一种通过JavaScript对象指定样式信息并应用于React组件的方法。
简而言之，就是直接编写样式。

[主要特点和优势]

因为与其他方法不同，它很难被再利用，有性能问题等等，并没有太大的优点，所以我会省略它。（如果有人不同意，并认为内联是更好的选项，请在评论中提出）

[实施例] lì)

import React from 'react';

const buttonStyle = {
  backgroundColor: '#007bff',
  color: '#fff',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px',
  cursor: 'pointer',
};

const Button = () => {
  return (
    <button style={buttonStyle}>Click me</button>
  );
};

export default Button;

CSS 框架

CSS框架提供了用于样式化组件、实用类、网格系统、表单元素等的常见样式模式。

与其他样式手法明显不同的是，它提供了组件等所需功能，因此需要按照提供的功能进行创建。(在其他方法中需要自己创建)

[主要特点和优势]

    1. 1. 有效率的开发：通过提供通用的样式模板，能够节省时间和精力在开始新项目时。

 

    1. 2. 设计一贯性：提供一致的设计风格，可以在不同的部分重用相同的设计元素，从而提升设计的一致性。

 

    1. 3. 支持响应式设计：许多CSS框架提供响应式设计的网格系统，使得适用于不同屏幕尺寸和设备的样式应用变得容易。

 

    1. 4. 社区和文档支持：常用的CSS框架得到了广泛采纳，有许多社区支持和文档可用。有助于解决问题和应对挑战。

 

    1. 5. 安全性和质量：通常会融入安全最佳实践，并且具备保证质量的特点。

 

    1. 6. 可定制性：许多CSS框架具有可定制性，可以根据项目的需求进行调整。可以根据需要扩展框架并覆盖样式。

 

    1. 7. 快速原型制作：能够快速创建应用程序或网站的原型。

 

    8. 跨浏览器兼容性：支持准确应用样式以确保跨浏览器兼容性。

使用CSS框架可以迅速创建特别是用于7个应用程序和网站的原型，这是使用CSS框架的一个重要优点。

[主要的CSS框架]

    • MUI(Material-UI)

 

    • Bootstrap

 

    Ant Design

[实施示例：针对MUI的情况]

我个人非常喜欢MUI，所以以它为例子。

import React from 'react';
import { TextField, Button, Container, Typography } from '@mui/material';

const SampleForm = () => {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // ここでフォームの値を使った何かしらの処理を実行
  };

  return (
    <Container maxWidth="sm">
      <Typography variant="h4" align="center" gutterBottom>
        Sample Form using MUI
      </Typography>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '1rem' }}>
          <TextField
            label="Name"
            variant="outlined"
            fullWidth
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div style={{ marginBottom: '1rem' }}>
          <TextField
            label="Email"
            variant="outlined"
            fullWidth
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <Button variant="contained" color="primary" type="submit">
          Submit
        </Button>
      </form>
    </Container>
  );
};

export default SampleForm;

即风CSS

Tailwind CSS是一种与传统CSS框架不同的CSS实用工具框架。

[主要特点与优势]

    1. 功能优先：可以使用单一的类应用样式，直观且快速地进行样式设置。例如，可以直接指定颜色和文本大小，例如 class=”bg-blue-500″ 或 class=”text-xl”。

可定制性：灵活且可定制。可以使用 tailwind.config.js 文件自定义不同样式，如颜色、字体大小、间距、阴影、网格等。这使得可以为每个项目构建独特的设计系统。

低学习成本：与其他 CSS 框架相比，Tailwind 的学习成本相对较低。由于采用了与常规 CSS 不同的方法，一旦理解基本的类和语法，就能实现灵活的样式设置。

高效开发：便于实现整个项目的统一设计，能够快速进行开发。样式的一致性容易保持，能够在 HTML 中编写直观易读的代码。

性能：在构建时使用，因此在生产环境中会删除冗余的类并生成优化的 CSS。

这次调查的结果显示，尽管它是一个CSS框架，但在npm trends排行榜上占据了前列，因此特意将其放在最后一位。

image.png

[实施示例]

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

import React from 'react';

const App = () => {
  return (
    <div className="bg-gray-100 h-screen flex items-center justify-center">
      <div className="bg-white p-8 rounded shadow-lg">
        <h1 className="text-2xl font-bold mb-4">Welcome to My App</h1>
        <p className="text-gray-700">This is a Tailwind CSS example in a React app.</p>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
          Click me!
        </button>
      </div>
    </div>
  );
};

export default App;

总结

我总结了关于React的样式化方法。虽然有一些潮流，但个人认为最重要的是选择适合组织和体制的方法，而不仅仅是哪种方法更好。因此，我将在选择时意识到这一点。

如果這篇文章的特點和示例代碼中有任何錯誤，請在評論中指出，因為它們是使用ChatGPT生成的。

bannerAds