前言
团队在使用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

React项目 - 几种CSS实践的更多相关文章

  1. React项目中 使用 CSS Module

    安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra.但是我们这里不需要安装 react-app-rewir ...

  2. react项目实践——(1)使用webpack创建项目

    1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...

  3. 创建react项目的几种方法

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  4. React项目的最佳实践

    项目代码 从零开始简书项目 ​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...

  5. 简述--构建React项目的几种方式

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  6. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  7. create-react-app创建react项目 css模块化处理

    用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...

  8. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  9. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

随机推荐

  1. toString和toLocalString

    toLocalString()是调用每个数组元素的 toLocaleString() 方法,然后使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串. toString()方法获取的是Strin ...

  2. computed属性和watcher

    computed属性 在模板中使用表达式是非常方便直接的,然而这只适用于简单的操作.在模板中放入太多的逻辑,会使模板过度膨胀和难以维护.例如: <div id="example&quo ...

  3. 【bzoj1146】[CTSC2008]网络管理Network

    题目描述: M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条 ...

  4. 基于BootStrap的分页代码实现

    public class PageUtil { //targetUrl 访问url totalNum总记录数 currentPage 当前页数 pageSize每页的大小 public static ...

  5. Linux相关基础知识

    文件目录 /bin 放置系统执行档的目录,指令可被root与一般账户所使用. /boot 放置开机使用到的文档,包括linux核心档案,开机选单与所需设定档. /dev 任何装置与周边设备都是以档案的 ...

  6. window下启动redis服务

    ---恢复内容开始--- 在windows环境下启动redis服务,前提是你安装好了,启动如下: 一,进入redis的安装目录下,在地址栏输入“cmd”,回车 二,然后会进入cmd界面,直接运行命令r ...

  7. angular 发送ajax

    在使用angular发送ajax的时候get和post一样的,就是method改一下. ajax的js: <script> var app = angular.module('emialV ...

  8. 微信小程序 button 组件

    button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...

  9. selinux 关闭

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  10. MyISAM、InnoDB、Memory这3个常用引擎支持的索引类型

    表格对比了MyISAM.InnoDB.Memory这3个常用引擎支持的索引类型: 索引 MyISAM引擎 InnoDB引擎 Memory引擎 B-Tree索引 支持 支持 支持 HASH索引 不支持 ...