Radium库的主要作用是在js中提供交互和媒体查询的样式，详细内容如下：
- 提供初始化
state - 处理
render方法后的style属性 - 合并
style属性传递来的数组样式
如<div key="one" style={[squareStyles.both, squareStyles.one]}>蓝色</div>
- 自动补全
style对象中属性的前缀 - 清理组件销毁时的任何资源
1、调用方法
//Radium with ES7 decorator
@Radium
class Test extends React.Component {...}
/*Usage with createClass*/
var MyComponent = React.createClass({ ... });
module.exports = Radium(MyComponent);
2、Radium中style写法
var styles = {
base: {
backgroundColor: '#0074d9',
fontSize: 16,
':hover': {
backgroundColor: '#0088FF'
},
// 媒体设备适配写法必须以@media开头,其他都与CSS语法相同
'@media (min-width: 992px)': {
padding: '0.6em 1.2em'
},
'@media (min-width: 1200px)': {
padding: '0.8em 1.5em',
':hover': {
backgroundColor: '#329FFF'
}
}
}
};
3、Radium中getState用法,主要用来处理:active, :focus, and :hover这三种交互
函数的写法为：
Radium.getState(state, elementKey, value)
注：使用该方法会自动生成动画名，会自动加入属性前缀，如"-webkit-animation:Animation1 5s ease 0s infinite;"
4、Radium中keyframes的用法
Radium.keyframes(keyframes, componentName)
例：
@Radium
class Spinner extends React.Component {
render () {
return (
<div>
<div style={styles.inner} />
</div>
);
}
}
var pulseKeyframes = Radium.keyframes({
'0%': {width: '10%'},
'50%': {width: '50%'},
'100%': {width: '10%'},
}, 'Spinner');
var styles = {
inner: {
animation: `${pulseKeyframes} 3s ease 0s infinite`,
background: 'blue',
height: '4px',
margin: '0 auto',
}
};
注：使用该方法会自动生成动画名，会自动加入属性前缀，如"-webkit-animation:Animation1 5s ease 0s infinite;"
