react里面 内联css样式怎么样_简单的使用Radium管理React中的内联样式

在React中使用行内的css样式非常简单，举个例子：

class App extends Component {

render() {

const style = { color: 'red' }

return (

hello world

);

}

}

这样就可以个组件增加颜色了，可是，如果想给div增加:hover这样的伪类，或者media query该怎么做呢，React支持的内联样式好像处理不了这样的需求。

这个时候，我们可以借助Radium这个第三方的包帮助我们实现需求，在项目中npm install radium --save 安装好这个包之后，如果希望使用伪类，你可以这么来写代码了：

import Radium from 'radium'

class App extends Component {

render() {

const style = {

color: 'red',

':hover': {

color: 'green'

}

}

return (

hello world

);

}

}

export default Radium(App);

可以看到，Radium就是一个HOC，如果感兴趣，大家可以看看Radium的底层代码(radium包中src目录下的enhancer.js文件是高阶组件的实现代码)，学习下HOC的一些设计方法。

如果想在行内样式中实现媒体查询@media或者css动画@keyframes, 那么，你可以这么写代码：

import React, { Component } from 'react';

import Radium from 'radium'

class App extends Component {

render() {

const style = {

color: 'red',

':hover': {

color: 'green'

},

'@media (min-width: 400px)': {

background: 'orange'

}

}

return (

hello world

);

}

}

export default Radium(App);

当然，光这么写，代码会报错，如果你用到媒体查询或者css动画，需要在组件的父级组件上，包裹一层外层组件，代码如下：

import { StyleRoot } from 'radium'

ReactDOM.render(, document.getElementById('root'));

之所以这么传，是因为StyleRoot采用了context传值这个方式，只有子组件才能取到父组件在context中存的内容；而context中，恰好存储了这些媒体查询和动画样式。

好了，动手实验一下上面的代码，你就可以借助radium这个包，在React中更加方便的使用内联样式了。