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.
`;

使用道具基于其他组件创建样式化的组件

1 个答案: