React项目 - 几种CSS实践

2018-11-09 admin

前言 团队在使用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 原生方法扩展,改良版 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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44910.html

文章标题:React项目 - 几种CSS实践

相关文章
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
优化RequireJS项目的相关技巧总结
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将...
2017-03-27
JavaScript中几种排序算法的简单实现
排序算法的实现 我的JS水平就是渣渣,所以我就用类似于JAVA和C的方式来写JavaScript的排序算法了。 而且这里我不讲算法原理,仅仅只是代码实现,可能会有Bug,欢迎大家博客评论指导。 插入排序 插入排序(Insertion-Sor...
2017-03-27
回到顶部