reactjs – React Styled Components Extend

发布时间：2020-12-15 20:30:28 所属栏目：百科来源：网络整理

导读：我试图重复使用和扩展风格的组件,没有运气.我怀疑我还没有完全掌握如何正确使用样式组件我有一个组件,根据传递给它的图标道具呈现一个V形图标.我想要做的是导出此组件,然后导入它并扩展其样式.即 – 在此示例中,在Header.jsx中删除其填充： Chevron.jsx imp

我试图重复使用和扩展风格的组件,没有运气.我怀疑我还没有完全掌握如何正确使用样式组件

我有一个组件,根据传递给它的图标道具呈现一个V形图标.我想要做的是导出此组件,然后导入它并扩展其样式.即 – 在此示例中,在Header.jsx中删除其填充：

Chevron.jsx

import React from 'react'
import styled from 'styled-components'

const StyledChevron = styled.i`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    cursor: pointer;
    border-left: 1px solid #efefef;
    transition: all .1s linear;
    transform: rotate(0deg);
    ${props=>props.closed && ``};
    &:hover {
        background: #f7f4f4;
    }
`

const Chevron = (props) => {

    return (
        <StyledChevron closed={props.item.closed} onClick={()=>{props.openSubMenu(props.item.id)}} className={props.icon}/>
    )

}

export default Chevron

Header.jsx

import React from 'react'
import styled from 'styled-components'
import cssvars from '../../js/style/vars'
import Chevron from './Chevron'

const StyledHeader = styled.div`
    display: flex;
    align-items: center;
    padding: 11px;
    justify-content: space-between;
    background: ${cssvars.primaryColor};
    h2 {
        font-size: 19px;
        color: #fff;
        display: flex;
        align-items: center;
    }
`

const BackChevron = Chevron.extend`
    padding: 0
`

const Header = (props) => {

    return (
        <StyledHeader>
            <h2>{props.item.title}</h2>
            <BackChevron {...props} icon="icon-arrow-left"/>
        </StyledHeader>
    )

}

export default Header

使用上面的代码,我得到控制台错误：未捕获的TypeError：_Chevron2.default.extend不是一个函数

解决方法

styled-components具有某种继承性

Chevron.jsx

import React from 'react'
import styled from 'styled-components'

const StyledChevron = styled.i`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    cursor: pointer;
    border-left: 1px solid #efefef;
    transition: all .1s linear;
    transform: rotate(0deg);
    ${props => props.closed && ``};

    &:hover {
        background: #f7f4f4;
    }
`

const Chevron = (props) => (
    <StyledChevron
      closed={props.item.closed}
      onClick={() => props.openSubMenu(props.item.id)}
      className={props.icon}
    />
)

export default Chevron

Header.jsx

import React from 'react'
import styled from 'styled-components'
import cssvars from '../../js/style/vars'
import Chevron from './Chevron'

const StyledHeader = styled.div`
    display: flex;
    align-items: center;
    padding: 11px;
    justify-content: space-between;
    background: ${cssvars.primaryColor};

    h2 {
        font-size: 19px;
        color: #fff;
        display: flex;
        align-items: center;
    }
`

const BackChevron = styled(Chevron)`
    padding: 0
`

const Header = (props) => (
    <StyledHeader>
        <h2>{props.item.title}</h2>
        <BackChevron {...props} icon="icon-arrow-left"/>
    </StyledHeader>
)

export default Header

正如@ yury-tarabanko评论中所述

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!