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. C# == 和equals()区别

    如以下代码: ? 1 2 3 4 5 int age = 25; short newAge = 25; Console.WriteLine(age == newAge);  //true Consol ...

  2. [转]Delphi : keydown与keypress的区别,组合键

    Shift 是一个集合变量. type TShiftState = set of (ssShift, ssAlt, ssCtrl, ssLeft, ssRight, ssMiddle, ssDoubl ...

  3. TCP连接的状态分析

    1.先来了解一下TCP连接建立与关闭过程中的各种状态: CLOSED:初始状态,表示没有任何连接.LISTEN:Server端的某个Socket正在监听来自远方的TCP端口的连接请求.SYN_SENT ...

  4. C++ 性能剖析 (四):Inheritance 对性能的影响

    (这个editor今天有毛病,把我的format全搞乱了,抱歉!) Inheritance 是OOP 的一个重要特征.虽然业界有许多同行不喜欢inheritance,但是正确地使用inheritanc ...

  5. 纯蓝ICON_学习教程

  6. 百度分享share.js插件

    //百度分享window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic ...

  7. 解决css3遮罩层挡住下面元素事件的方法

    比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:poin ...

  8. Python新手学习基础之数据结构-对数据结构的认知

    什么是数据结构? 数据结构是指:相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成. 举个列子来理解这个数据结构: 数据可以比作是书本, 数据结构相当于书架,书存放在书架上, ...

  9. django+nginx+supervisor+gunicorn+gevent 网站部署

    django+nginx+supervisor+gunicorn+gevent 网站部署 django,nginx,supervisor,gunicorn,gevent这几个都是在本领域大名鼎鼎的软件 ...

  10. Unity扩展编辑器--类型3:Custom Editors

    Custom Editors 加速游戏制作过程的关键是为哪些频繁使用的组件创建自定义的编辑器,为了举例,我们将会使用下面这个极其简单的脚本进行讲解,它的作用是始终保持一个对象注视某一点. public ...