Skip to main content

React中Css几种实现方案

全局样式

与传统 html 标签类属性不同,react 中 class 必须编写为 className,比如

全局 css

.box {
background-color:red;
width:300px;
height:300px;
}

js

function Hello() {
return <div className='box'>hello react</div>
}

ReactDOM.render(<Hello />, document.getElementById('root'))

与传统在 html 标签定义 css 样式不同,因为这不是传统的 html 代码,而是 JSX,由于 class 作为关键字,无法作为标识符出现,比方说下面的代码将会报错。

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' }
const { class: className } = { class: 'foo' }

关于官方也有对此问题回答

有趣的话题,为什么 jsx 用 className 而不是 class

所以把传统的 html 代码强行搬运到 react 中,如果带有 class 与 style 属性,那么将会报错。

内联样式

内联样式也得写成对象 key-value 形式,遇到-连字符,则需要大写,如

function Hello() {
return (
<div className='box' style={{ fontSize: '32px', textAlign: 'center' }}>
hello react
</div>
)
}

CSS 的font-size属性要写成fontSize,这是 JavaScript 操作 CSS 属性的约定

其实{ } 可传入表达式,比方这里传入的就是{ fontSize: "32px",textAlign: "center" } 对象,也可以将其定义为一个变量传入。

但是写内联样式显得组丑陋影响阅读,并且样式不易于复用,同时伪元素与媒体查询无法实现,但是封装成类样式,又会影响到全局作用域,所以便有了局部样式styles.module.css

局部样式 CSS Modules

Css Modules 并不是 React 专用解决方法,适用于所有使用 webpack 等打包工具的开发环境。以 webpack 为例,在 css-loader 的 options 里打开modules:true 选项即可使用 Css Modules。一般配置如下

{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]" // 为了生成类名不是纯随机
},
},

然后通过 import 引入

import styles from './styles.module.css'

function Hello() {
return <div className={styles.box}>hello react</div>
}

但如果是有多个局部样式,直接拼接是无效的(毕竟是个无效的表达式)

// 错误
<div className={style.class1 style.class2}</div>

// 正确
<div className={`${style.class1} ${style.class2}`}</div>
<div className={style.class1+ " " +style.class2}</div>
<div className={[style.class1,style.class2].join(" ")}</div>

classnames

还可以通过 npm 包 classnames 来定义类名,如

import classnames from 'classnames'
import styles from './styles.module.css'

;<div className={classnames(styles.class1, styles.class2)}></div>

最终都将编译为

<div class='class1 class2'></div>

当然 classnames 还有多种方式添加,就不列举了,主要针对复杂样式,根据条件是否添加样式。

但是 在 Css Module 中,其实能发现挺多问题的

如果类名是带有-连字符.table-size那么就只能styles["table-size"] 来引用,并且都必须使用{style.className} 形式。

最主要的是,css 都写在 css 文件中,无法处理动态 css。

CSS in JS

由于 React 对 CSS 的封装非常弱,导致了一系列的第三方库,用来加强 CSS 操作,统称为 CSS in JS,有一种在 js 文件中写 css 代码的感觉,根据不完全统计,各种 CSS in JS 的库至少有47 种,其中比较出名的 便是styled-components

import styled from 'styled-components'

// `` 和 () 一样可以作为js里作为函数接受参数的标志,这个做法类似于HOC,包裹一层css到h1上生成新组件Title
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;

span {
font-size: 2em;
}
`

// 在充分使用css全部功能的同时,非常方便的实现动态css, 甚至可以直接调用props!
const Wrapper = styled.section`
padding: 4em;
background: ${(props) => props.bgColor};
`

const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
/* The GitHub button is a primary button
* edit this to target it specifically! */
${(props) =>
props.primary &&
css`
background: white;
color: palevioletred;
`}
`

const App = () => (
<Wrapper bgColor='papayawhi'>
<Title>
<span>Hello World</span>, this is my first styled component!
</Title>
<Button href='https://github.com/styled-components/styled-components' target='_blank' rel='noopener' primary>
GitHub
</Button>
</Wrapper>
)

像上面的 Title,Wrapper,Button 都是组件,Title 本质就是一个 h1 标签,在通过模板字符串编写局部 css 样式。

能直接编写子元素的样式,以及& :hover等 Sass 语法。

根据传入属性,在 css 中使用,Wrapper 传入背景颜色属性,Button 判断是否为 primary。

并且能方便的给暴露className props 的三方 UI 库上样式:

const StyledButton = styled(Button)` ... `

styled-jsx

vercel/styled-jsx: Full CSS support for JSX without compromises (github.com)

styled-jsx 概括第一印象就是 React css 的 vue 解决。yarn add styled-jsx 安装后,不用import,而是一个 babel 插件,.babelrc配置:

{
"plugins": [
"styled-jsx/babel"
]
}

使用


render () {
return <div className='table'>
<div className='row'>
<div className='cell'>A0</div>
<div className='cell'>B0</div>
</div>
<style jsx>{`
.table {
margin: 10px;
}
.row {
border: 1px solid black;
}
.cell {
color: red;
}
`}</style>
</div>;
}

只会作用到同级标签作用域,可以说是一种另类的内联样式了,如果不喜欢将样式写在 render 里,styled-jsx 提供了一个 css 的工具函数:

import css from 'styled-jsx/css'

export default () => (
<div>
<button>styled-jsx</button>
<style jsx>{button}</style>
</div>
)

const button = css`
button {
color: hotpink;
}
`

补充:现在我更推荐使用 Emotion。

原子类

简单说,就是将常用的 css 样式都封装完,只需要在 class 中引入即可

这里选用当红框架 Tailwind CSS 作为演示。

比方说 flex 布局的话,就需要写 dispaly: flex; 但是封装成类,如

.flex {
dispaly: flex;
}

引用的时候直接在 class 中添加 flex 即可

<h1 class='flex'>tailwindcss</h1>

贴一张官方演示图,把大部分常用的样式都封装成 class

官方在线例子(下图) Tailwind Play (tailwindcss.com)

有以下几种优点:

  1. 源代码无非就是 css 的基本样式,如 class w-auto 对应 css width: auto; 等等
  2. 如果不是特别复杂的样式,甚至可以不用写一条 css 代码,开发效率杠杠的。
  3. 体积很小,更好的样式复用,并且打包后会根据所用的 class 进行打包,而非全部无用样式打包。
  4. 与 bootstrap 设计不同,完全可以定制化不同类型的组件,而不是像 class="btn btn-danger" 这样。

体验下来基本上就是在写内联样式 inline css 但是同时又不显得杂乱。

组件化中使用

在组件化开发中,完全可以自己实现一个 Button 按钮(上间距 pt-4,底部间距 pb-10,文字为 text-sky-500 天蓝色),

const Button = ({ children, color }) => (
<a className=`pt-4 pb-10 text-sky-500 ${color}`>{children}</a>
)

不过要说缺点的话:

  1. 可能之前标题只需要定义.title 类来完成全部样式,而 tailwind 需要好几个 css 原子类来实现
  2. 初学者可能不适应,需要反复的查阅文档。(不过用多了,自然就会习惯了)

然后还有一个 WindCSS,可以看作是按需供应的 Tailwind 替代方案。不过暂时不支持 React。

此外还有一篇文章非常推荐 重新构想原子化 CSS (antfu.me),不多说,再刷一遍。

最佳实现?

介绍完几种 React 中 Css 的实现(当然还有很多库没介绍,主要挑几种主流的),实际又要选择哪种呢?

说说我目前 react 所选的操作,tailwind(原子类)+ CSS modules,写一些小项目或者 demo 甚至都没必要写 css 代码,毕竟 css 是大多数前端程序员都不是那么想写的(包括我)。而做一些自定义的小组件的话那肯定是 styled-components,而 styled-jsx,对组件代码牺牲挺大所以不怎么写。

不过每个人使用风格不同,我一开始接触原子类是 windicss,用久了之后习惯了常用的 class,编写起来可以说是相当的快捷了。

不过相比 Vue 而言,react 的 css 实现着实费劲。

参考链接:

CSS Modules 用法教程 - 阮一峰的网络日志 (ruanyifeng.com)

CSS in JS 简介 - 阮一峰的网络日志 (ruanyifeng.com)

React 拾遗:从 10 种现在流行的 CSS 解决方案谈谈我的最爱 (下) - 掘金 (juejin.cn)