前言
团队在使用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\"
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
