zoukankan      html  css  js  c++  java
  • [React] Radium: Updating Button Styles via Props

    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)
  • 相关阅读:
    锻炼意志力
    iOS 函数积累
    iOS8新特性 计算 cell 的高度
    iOS 国际化支持 设置
    CALayer 方法属性整理
    好的 blog 整理
    xcode7 打包上传至 app store
    ios 适配 (字体 以及 控件)
    iOS 适配设计与切图
    iOS app 切图
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5402996.html
Copyright © 2011-2022 走看看