React项目 – 几种CSS实践

前言
团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-component,只列举了团队项目中用过的一下实现方式,还有其他的不过多展开

css的不足
样式与状态相关的情况越来越多,需要动态、能直接访问组件state的css。
一切样式都是全局,产生的各种命名的痛苦,BEM等命名规则能解决一部分问题,但当你使用三方插件时却无法避免命名冲突。

Vue怎么解决
scoped 属性
动态css的语法 v-bind class style

react中使用css的标准
是否解决了React开发的痛点:局部css,动态css?
是否支持所有css甚至是sass用法?伪类,嵌套,动画,媒体查询?
是否兼容你需要使用的第三方UI库?
是否能和纯css,或者是其他css框架很好共存,以备遇到特殊情况可以有方案B?
性能?大小?

react 原生css
inline style

const textStyles = { color: 'white', backgroundColor: this.state.bgColor};<p style={textStyles}>inline style</p>

缺点:

发明了一套新的 css-in-js 语法,使用驼峰化名称等一些规则不支持所有的 css,例如 media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!).inline 写法如果直接同行写影响代码阅读,不清晰优雅

Radium
Features:
Conceptually simple extension of normal inline styles 原生css扩展,改良版
Browser state styles to support :hover, :focus, and :active 支持浏览器样式
Media queries 支持媒体查询
Automatic vendor prefixing 自动组件前缀 scope
Keyframes animation helper 写动画更方便,封装Keyframes
ES6 class and createClass support 支持react类和createClass的写法

简单使用:

<Button kind="primary">Radium Button</Button>import Radium from 'radium';import React from 'react';import color from 'color';class Button extends React.Component { static propTypes = { kind: PropTypes.oneOf(['primary', 'warning']).isRequired }; render() { return ( <button // 多个样式使用数组方便合并 style={[ styles.base, styles[this.props.kind] ]}> {this.props.children} </button> ); }}// 使用了HOC的方式注入样式// Radium's primary job is to apply interactive or media query styles, but even // if you are not using any special styles, the higher order component will still:// Merge arrays of styles passed as the style attribute// Automatically vendor prefix the style object// Radium(config)(component) 还可以传入一些配置Button = Radium(Button);var styles = { base: { color: '#fff', ':hover': { background: color('#0074d9').lighten(0.2).hexString() } }, primary: { background: '#0074D9' }, warning: { background: '#FF4136' }};

keyframes使用

class Spinner extends React.Component { render () { return ( <div> <div style={styles.inner} /> </div> ); }}Spinner = Radium(Spinner);var pulseKeyframes = Radium.keyframes({ '0%': {width: '10%'}, '50%': {width: '50%'}, '100%': {width: '10%'},}, 'pulse');var styles = { inner: { // Use a placeholder animation name in `animation` animation: 'x 3s ease 0s infinite', // Assign the result of `keyframes` to `animationName` animationName: pulseKeyframes, background: 'blue', height: '4px', margin: '0 auto', }};

Css Modules
适用于所有使用 webpack 等打包工具的开发环境

{ loader: "css-loader", options: { importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" // 为了生成类名不是纯随机 },},import styles from './table.css'; render () { return <div className={styles.table}> <div className={styles.row}> <div className={styles.cell}>A0</div> <div className={styles.cell}>B0</div> </div> </div>; }/* table.css */.table {}.row {}.cell {}

缺点:

class名必须是驼峰形式,否则不能正常在js里使用 styles.table 来引用由于css模块化是默认,当你希望使用正常的全局css时,需要通过:local 和 :global 切换,不方便所有的 className 都必须使用 {style.className} 的形式写在外部样式文件中,无法处理动态css

优化:

 babel-plugin-react-css-modules 可以照常写 'table-size' 之类带横杠的类名 正常书写字符串类名,不用加style前缀
// .bablerc{ "plugins": [ ["react-css-modules", { // options }] ]}

缺点:

不过使用 styleName 遇到三方UI库该怎么办呢

补充:
create-react-app v2 直接使用css-moudues和sass
使用方法为一律将css文件命名为 XXX.modules.css, 以上例,即为 table.modules.css, 即可使用。这一解决法的优雅在于,全局的css可以正常使用,只有带.modules.css后缀的才会被modules化

styled-components
使用 ES6 的模板字符串,在js文件里写纯粹的css。

补充sass常用语法

变量:以$开头/变量需要在字符串之中,在#{}之中
计算: 属性可以使用算式
嵌套: &引用父元素
继承: @extend
重用: @mixin命令,定义一个代码块(可以传参数)/@include命令,调用这个mixin
引入文件: @import

// 变量 $blue : #1875e7; $side : left; div {   color : $blue; } .rounded {  border-#{$side}-radius: 5px; }// 计算 body {    margin: (14px/2);    top: 50px + 100px;    right: $var * 10%;  }// 嵌套 a {    &:hover { color: #ffb3ff; }  }// 继承 .class1 {    border: 1px solid #ddd;  } .class2 {    @extend .class1;    font-size:120%;  }// 重用 @mixin left($value: 10px) {    float: left;    margin-right: $value;  } div {    @include left(20px);  }//引入外部文件 @import "path/filename.scss"

来源:https://segmentfault.com/a/1190000016952542

相关文章