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)
  • 相关阅读:
    【小白成长撸】--二分查找
    【ACM小白成长撸】--贪婪法解硬币找零问题
    【小白成长撸】--Fibonacci
    【ACM小白成长撸】--计算单词个数
    【小白成长撸】--多项式求圆周率PI
    【小白成长撸】--循环顺序队列
    【小白成长撸】--链栈(C语言版)
    盘前预测-3.15
    盘前预测-3.11
    盘前预测-3.10
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5402996.html
Copyright © 2011-2022 走看看