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)
  • 相关阅读:
    转:ibatis的N+1问题解决方案
    转:ibatis动态sql
    转:Spring源码分析:IOC容器
    web项目中通过spring获得ApplicationContext
    转:import static和import的区别
    python实现linux命令结果输出
    linux获取当前pts
    docker挂载本地目录
    mysql数据导入导出
    python实现linux远程操控windows执行cmd命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5402996.html
Copyright © 2011-2022 走看看