react中使用css的7中方式(最全总结)(2)

import React, { Component } from "react"; import Radium from 'radium'; let styles = { base: { color: '#fff', ':hover': { background: '#0074d9' } }, primary: { background: '#0074D9' }, warning: { background: '#FF4136' } }; class Test extends Component { constructor(props, context) { super(props); } render() { return ( <div> <button style={[ styles.base, styles.primary ]}> this is a primary button </button> </div> ); } } export default Radium(Test);

对于处理变量、媒体查询、伪类等是不方便的。

使用Radium可以直接处理变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等。

具体用法请查看radium官网

注意:

在export之前，必须用Radium包裹。