Создайте стилизованный компонент на основе другого компонента с помощью реквизита

Question

Добавление стиля к P прекрасно работает:

const Quotation = styled(P)`
    &::before, &::after {
        content: '"';
    }
`;

Но я хочу добавить стиль к P с пропуском italic=true.Что-то вроде:

const Quotation = styled(P italic=true)`
    &::before, &::after {
        content: '"';
    }
`;

Как я могу это сделать?

Answer 1

Вы можете сделать свой компонент как:

interface Props { children: any , italic ?: boolean }

const P = styled.p<Props>`
    // Style you added.
    font-style: ${({ italic }) => italic ? 'italic' : 'normal'  };
`;

const Quotation = styled(P)`
    &::before, &::after {
        content: '"';
    }
    // Additional style.
`;

Использование

render() {
    return (
        <div>
            <Quotation italic={true}> Hello World </Quotation>
        </div>
    )  
}

Когда вы расширяете компонент с помощью Styled(ComponentA), вы наследуете props.

Однако в вашем случае пропуска реквизита могут быть излишними, вы можете просто сделать:

const P = styled.p`
     // style you added.
`;

const Quotation = styled(P)`
    &::before, &::after {
        content: '"';
    }
    font-style: italic; 
    // Additional style.
`;