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. 

  • 相关阅读:
    Oracle查询一个用户的所有表的结构信息的SQL语句
    Unable to locate provider for protocol: smtp
    IE6 IE7 IE8(Q) 不支持 JSON 对象
    如何获取tinyeditor编辑器里面的值
    POJ 2513 Colored Sticks 字典树 + 并查集 + 欧拉路
    HDOJ 2574 Hdu Girls' Day
    HDOJ 2087 剪花布条 KMP算法
    HDOJ 2094 产生冠军
    NYOJ525 一道水题
    POJ 2406 power strings KMP中next函数的应用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6516738.html
Copyright © 2011-2022 走看看