zoukankan      html  css  js  c++  java
  • [React] Recompose: Override Styles & Elements Types in React

    When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements.

    Feeling using Recompose is a good way to build npm module, custom libaray. 

    So the comoponent can be highly custmizable.

    import React from 'react';
    import {setDisplayName, componentFromProp, mapProps, defaultProps, compose} from 'recompose';
    import Radium from 'radium';
    
    const addStyle = style => mapProps(props => ({
        ...props,
        style: [
            props.style,
            style
        ]
    }));
    
    const style = {
        backgroundColor: 'black',
        color: 'white',
        transform: 'rotate(-13deg)',
        transition: 'all ease 0.43s',
        ':hover': {
            backgroundColor: 'orange',
            color: 'lightGreen',
            transform: 'rotate(0deg)'
        }
    };
    
    const enhance = compose(
        addStyle(style),
        setDisplayName('Button'),
        defaultProps({
            element: 'button'
                     }),
        Radium
    );
    
    export default enhance(componentFromProp('element'));

    Using:

            <Button
                element={'button'}
                style={{borderRadius: '10px'}}
                onClick={onRemoveBox}
            >Remove</Button>

    In the code, we are able to override the default style by passing 'style' from props:

    const addStyle = style => mapProps(props => ({
        ...props,
        style: [
            props.style,
            style
        ]
    }));
    
    const enhance = compose(
        addStyle(style),
        setDisplayName('Button'),
        defaultProps({
            element: 'button'
                     }),
        Radium
    );

    Here we also using 'Radium', so that we can add 'hover' sudo effect.

    We can also say what kind of element we want to show:

        defaultProps({
            element: 'button'
                     }),
    
    
            <Button
                element={'a'} href="http://google.fi"
                style={{borderRadius: '10px'}}
                onClick={onRemoveBox}
            >Remove</Button>

    We can change to 'a' tag if we want. 

  • 相关阅读:
    小技巧
    常用的交互设计软件
    Android studio 使用SVN需要忽略的文件
    android studio 使用SVN 锁定文件,防止别人修改(基于Android studio 1.4 )
    git 和 github 关系?
    Double 数据保留两位小数一:五舍六入
    设计模式
    Java中关于日期类那些方法
    ios 开源免费接口
    华为招聘机试整理5:简单四则运算
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6516738.html
Copyright © 2011-2022 走看看