方案概览

React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案;React 样式方案主要有:​

  1. 内联样式​:简单直观,适合动态样式和小型项目,但复用性差,功能有限;
  2. module css​:提供局部作用域,支持所有 CSS 功能,适合中大型项目,但配置复杂;
  3. css in js​:组件化样式,动态生成样式,功能强大,适合大型项目,但性能开销和学习成本较高;
  4. tailwindcss:实用优先,快速开发 UI,适合所有项目,但类名冗长,灵活性受限;

内联样式

通过 style 属性直接在组件中定义样式;

优势

  1. 简单直观:直接在 JSX 中定义样式,容易理解和使用;

  2. 避免全局命名冲突:因为样式是局部的,不会与其他组件的样式冲突;

  3. 动态样式:可以方便地使用 JavaScript 表达式动态生成样式;

缺点

  1. 样式复用差:无法轻易复用样式,导致样式代码重复;

  2. 缺乏伪类和伪元素支持:无法使用 :hover:active 等伪类和伪元素;

  3. CSS 功能有限:许多 CSS 功能 (如媒体查询、关键帧动画等) 不能使用;

示例

const divStyle = {​
  color: 'blue',​
  backgroundColor: 'lightgray'​
};​
​
function StyledComponent() {​
  return <div style={divStyle}>Hello, world!</div>;​
}

CSS Modules

  1. CSS 模块允许为 CSS 类名添加局部作用域,避免样式冲突;

  2. 文件名通常以 .module.css 结尾;

优势

  1. 局部作用域:每个模块的 CSS 都是局部的,不会全局污染;

  2. 复用性好:可以在不同组件中导入相同的样式文件,复用性强;

  3. 支持所有 CSS 功能:可以使用所有 CSS 功能,包括媒体查询、伪类和伪元素;

缺点

  1. 配置复杂:需要通过构建工具 (如 Webpack) 进行配置;

  2. 样式依赖文件系统:样式存储在独立的文件中,可能影响开发体验;

示例

CSS
JSX
/* styles.module.css */​
.container {​
  color: red;​
}
import styles from './styles.module.css';​
​
function StyledComponent() {​
  return <div className={styles.container}>Hello, world!</div>;​
}

CSS-in-JS

  1. CSS-in-JS 是指一种模式,其中 CSSJavaScript 生成而不是在外部文件中定义;

  2. 目前比较流行的 CSS-in-JS 的库:

    1. styled-components
    2. emotion
    3. glamorous

优势

  1. 组件化样式:样式与组件逻辑紧密结合,提升了组件的可维护性;

  2. 动态样式:支持通过 propsstate 动态生成样式;

  3. 避免全局冲突:生成唯一的 className,避免样式冲突;

  4. 丰富的功能:支持嵌套、伪类、媒体查询等高级 CSS 功能;

缺点

  1. 性能开销:在运行时生成样式,可能会增加性能开销,特别是在大量组件中使用时;

  2. 学习成本:需要学习特定的库和语法;

  3. 打包体积:可能增加打包后的 JavaScript 体积;

  4. SSR:支持较困难;

Styled Components

  1. 使用 styled-components 库可以在 JavaScript 中编写实际的 CSS,提供了组件级别的样式管理;

  2. 示例:

    import { createRoot } from "react-dom/client";
    import styled from 'styled-components';
    
    const StyledButton = styled.button`
      padding: 12px 24px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    
      &:hover {
        background-color: #2563eb;
      }
    
      &:active {
        transform: scale(0.98);
      }
    `;
    
    function App() {
      return <StyledButton>Click Me</StyledButton>;
    }
    
    createRoot(document.getElementById("root")).render(<App />);
    

emotion

  1. Emotion 是一个强大的 CSS-in-JS 库,提供了灵活的样式管理方案;

  2. 示例:

    import { createRoot } from "react-dom/client";
    import styled from "@emotion/styled";
    
    const StyledButton = styled.button`
          padding: 12px 24px;
          background-color: #3b82f6;
          color: white;
          border: none;
          border-radius: 4px;
          font-size: 16px;
          cursor: pointer;
    
          &:hover {
            background-color: #2563eb;
          }
    
          &:active {
            transform: scale(0.98);
          }
        `;
    
    function App() {
      return <StyledButton>Click Me</StyledButton>;
    }
    
    createRoot(document.getElementById("root")).render(<App />);
    

tailwindcss

  1. Tailwind CSS 是一个实用优先 (utility-first)CSS 框架,与传统的 UI 框架 (如 Bootstrap) 有根本性不同;

  2. 它提供了一套低级别的实用类 (utility classes),让开发者可以直接在 HTML/JSX 中快速构建定制化设计;

核心特点

  1. 提供原子化的 CSS 类,每个类通常只对应一个 CSS 属性;

    <div class="p-4 bg-blue-500 text-white rounded-lg"></div>
    
  2. 内置响应式前缀系统;

    <div class="text-sm md:text-base lg:text-lg"></div>
    
  3. (Just-In-Time) 按需生成样式,极大减少文件体积;

优势

  1. 开发速度:快速原型设计和迭代;

  2. 一致性:强制执行设计系统规范;

  3. 灵活性:不受预制组件限制;

  4. 性能:生产环境下 CSS 极小;

  5. 维护性:样式与标记共存,无需在文件间跳转;

局限

  1. 学习曲线:需记忆大量实用类;

  2. 设计能力依赖:需要良好的 CSS 基础;

  3. 初期设置:配置较复杂;

  4. 标记膨胀:HTML/JSX 中类名可能很长;

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻,我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 方案概览
  2. 2. 内联样式
    1. 2.1. 优势
    2. 2.2. 缺点
    3. 2.3. 示例
  3. 3. CSS Modules
    1. 3.1. 优势
    2. 3.2. 缺点
    3. 3.3. 示例
  4. 4. CSS-in-JS
    1. 4.1. 优势
    2. 4.2. 缺点
    3. 4.3. Styled Components
    4. 4.4. emotion
  5. 5. tailwindcss
    1. 5.1. 核心特点
    2. 5.2. 优势
    3. 5.3. 局限