Как РАСШИРЯТЬ импортированные компоненты со стилями компонентов - PullRequest
Новая
       19

Как РАСШИРЯТЬ импортированные компоненты со стилями компонентов

0 голосов
/ 05 мая 2020

Я не могу расширить импортированный компонент. Я искал документы о стилизованных компонентах и ​​обнаружил, что в v4 + должно работать опора «as», но это не так.

COMPONENT: 

    type Props = {
        padding: string,
        justify: string
    }

    const FlexContainer = styled.div<Props>`
        padding: ${props => props.padding};
        display: flex;
        flex-wrap: wrap;
        justify-content: ${props => props.justify};
    `

    export const Flexcontainer: React.FC<Props> = props =>{
        return (
        <FlexContainer padding={props.padding} justify={props.justify}>
            {props.children}
        </FlexContainer>


 )
}

EXTENDED СТИЛЬ: 

import { Flexcontainer }  from '../../reusable/FlexContainer';

const FlexContainerExtended = styled.div`
  color: red;
`

ИСПОЛЬЗОВАНИЕ: 

<FlexContainerExtended
  padding={null}
  justify={"flex-start"}
  as={Flexcontainer}>

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Вы можете просто передать базовый компонент стилизованной функции, чтобы переопределить его. 

   type Props = {
        padding: string,
        justify: string
    }

    const FlexContainer = styled.div<Props>`
        padding: ${props => props.padding};
        display: flex;
        flex-wrap: wrap;
        justify-content: ${props => props.justify};
    `
    const FlexContainerExtended = styled(FlexContainer)`
       color: red;
    `

    export const Flexcontainer: React.FC<Props> = props =>{
        return (
        <FlexContainer padding={props.padding} justify={props.justify}>
            {props.children}
        </FlexContainer>
 )
}
// And use it like this
<FlexContainerExtended
  padding={null}
  justify={"flex-start"}/>
0 голосов
/ 05 мая 2020

Вам просто нужно добавить опору className к вашему Flexcontainer компоненту следующим образом: 

export const Flexcontainer: React.FC<Props> = props =>{
    return (
      <FlexContainer className={props.className} padding={props.padding} justify={props.justify} >
        {props.children}
      </FlexContainer>
)}

Чтобы переопределить стили, styled-components передает className в качестве props переопределенному компоненту, вот почему

...