In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.

Radiumn allows 'style' attr accepts array. Inside array, the larger index style will overwrite the pervious index's style.

  <button style={[
styles.base,
type==='primary' && styles.primary
]}>
{children}
</button>

So in the code, styles.primary will overwrite the styles.base:

const styles = {
base: {
backgroundColor: '#aaa',
border: 'none',
borderRadius: 4,
color: '#fff',
padding: '5px 20px',
':hover': {
backgroundColor: '#08f'
}
},
primary: {
backgroundColor: '#07d'
}
}

We can pass a props to the component to tell when should apply styles.primary style:

const { render } = ReactDOM
const rootEl = document.getElementById('root') const Button = Radium(({ children, kind }) => (
<button style={[
styles.base,
kind === 'primary' && styles.primary
]}>
{children}
</button>
)) const styles = {
base: {
backgroundColor: '#aaa',
border: 'none',
borderRadius: 4,
color: '#fff',
padding: '5px 20px',
':hover': {
backgroundColor: '#08f'
}
},
primary: {
backgroundColor: '#07d'
}
} render(
<Button kind="primary">
OK
</Button>,
rootEl)

[React] Radium: Updating Button Styles via Props的更多相关文章

  1. [React] Intro to inline styles in React components

    React lets you use "inline styles" to style your components; inline styles in React are ju ...

  2. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  3. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  4. React Native 快速入门之认识Props和State

    眼下React Native(以后简称RN)越来越火,我也要投入到学习当中.对于一个前端来说,还是有些难度.因为本人觉得这是一个App开发的领域,自然是不同.编写本文的时候,RN的版本为0.21.0. ...

  5. React高阶组件 和 Render Props

    高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...

  6. [React] Use Prop Collections with Render Props

    Sometimes you have common use cases that require common props to be applied to certain elements. You ...

  7. React Native 一个组件styles BUG

    'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = Re ...

  8. Android 更改按钮样式 Button Styles

    extends:http://stackoverflow.com/questions/26346727/android-material-design-button-styles   I will a ...

  9. react设置默认state和默认props

    1.默认状态设置 1.constructor (ES6) constructor(props) { this.state = { n: ... } } 2.getInitialState (ES5) ...

随机推荐

  1. linux common command.

    Stopping & Starting shutdown -h now – Shutdown the system now and do not reboothalt – Stop all p ...

  2. javascript基础学习(十三)

    javascript之文档对象 学习要点: 文档对象 文档对象的应用 一.文档对象 Document对象是代表一个浏览器窗口或框架中的显示HTML文件的对象.javascript会为每个HTML文档自 ...

  3. Spring mvc 中有关 Shiro 1.2.3 配置问题

    Spring 版本:3.2.x,  4.0.x [问题说明] 首先介绍下配置出错情况: (1)项目中,Spring3 and Spring4 的 applicationContext.xml aop ...

  4. 命令行bash的基础操作

    刚进入系统在光标前面会显示这样一串字符[root@centeros ~]# root表示当前的登录用户可以通过id命令查看 centeros表当前的主机名可以通过hostname查看 ~表示当前用户的 ...

  5. Oracle 体系结构及安全管理

    1 oracle数据库服务器构成:数据库和实例2 oracle内部结构: 物理存储结构: 数据文件(xxx.dbf):存放数据 控制文件(xxx.ctl):控制数据库的完整性恢复数据或使用的日志文件 ...

  6. JQuery相关的网络资源

    jquery插件列表 国外网站:http://plugins.jquery.com/ 国内网站:http://www.oschina.net/project/tag/273/jquery

  7. oracle通过query导出指定条件的数据

    通过下面的方式oracle可以导出指定了条件的数据: exp mixcoaldb/mixcoaldb@server tables=(shengcssjk) query=\"where to_ ...

  8. HDU 4627(最小公倍数最大问题)

    HDU 4627 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  9. java面试(毕业一年后准备换工作)

    还记得一年前的今天,在网上投简历,找工作,当时找的工作的工作地点都在成都,其实自己挺想去外面工作几年的,如果毕业后就在成都工作,今后基本不可能去外省了, 所以刚好上海的一家外包公司来成都理工校招,导员 ...

  10. poj Candies

    http://poj.org/problem?id=3159 #include<cstdio> #include<queue> #include<cstring> ...