跳到主要内容

其他常用库✅

react 中如何书写样式，有哪些模式？​

答案
模式主要方式优势典型库/方案
外部 CSS传统 CSS 文件复用性高，易维护CSS/SCSS/LESS
CSS Modules局部作用域，自动 hash防止全局污染create-react-app
内联样式style 属性对象动态、简单React 原生支持
CSS-in-JSJS 生成 CSS动态、主题、隔离styled-components、emotion
Tailwind CSS原子类名快速开发、无命名冲突tailwindcss

详细说明

  • 外部 CSS：通过 import './App.css' 或 <link> 引入，适合全局样式和传统项目。

  • CSS Modules：文件名如 App.module.css，类名自动本地化，避免全局污染，推荐组件化开发。

    import styles from './App.module.css'
    <div className={styles.container}></div>

  • 内联样式：直接在 JSX 中写 style 对象，适合动态样式，但不支持伪类和媒体查询。

    <div style={{ color: 'red', fontSize: 16 }}></div>

  • CSS-in-JS：用 JS 语法描述样式，支持变量、条件、主题切换，常见库如 styled-components、emotion。

    import styled from 'styled-components'
    const Btn = styled.button`color: red; font-size: 16px;`

  • Tailwind CSS：通过类名组合实现样式，极简、无命名冲突，适合快速开发和原型设计。

    <button className="bg-blue-500 text-white px-4 py-2"></button>

实际开发建议

  • 小型项目或全局样式用外部 CSS。
  • 组件化优先 CSS Modules 或 CSS-in-JS。
  • 追求极简和快速开发可选 Tailwind CSS。
提示

团队协作建议统一样式方案，避免混用导致维护困难。

延伸阅读

55%