如何将打字稿界面属性与边距属性一起使用？

【问题标题】：How to use typescript interface property with the margin property?如何将打字稿界面属性与边距属性一起使用？
【发布时间】：2020-07-30 21:43:47
【问题描述】：

我有一个标签组件，它是一个跨度标签并接受道具重量和大小，如下所示，

interface Props {
    weight?: 200 | 400 | 500 | 700 | 900;
}

const Label = styled.span<Props>`
    margin: 0;
    font-weight: ${p => p.weight || 200};
`;

现在我在其他组件中使用它，我需要在标签组件中添加边距，如下所示，

render = () => {
    return (
        <Label 
            weight={400}>
            without using margin-right
        </Label>
        <Label
            weight={700} 
            margin-right={5px} //here i want to add margin-right
        </Label>
    )
}

如何修改 Label 组件，使其接受 margin-right 属性，或者更好地添加具有四个值的 margin 属性，例如 margin = {0 0 0 5}px;

有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

标签： css reactjs typescript styled-components

【解决方案1】：

您必须将您的 Props 更新为以下内容：

interface Props {
    margin?: string
    mb?: string
    ml?: string
    mr?: string
    mt?: string
    weight?: 200 | 400 | 500 | 700 | 900;
}

注意：mb 将代表margin-bottom 等等...

然后更新您的Label 如下：

const Label = styled.span<Props>`
    font-weight: ${p => p.weight || 200};
    margin: ${p => p.margin ? margin : 0};

    ${p => p.mb ? `margin-bottom: ${mb};` : ''}
    ${p => p.ml ? `margin-left: ${ml};` : ''}
    ${p => p.mr ? `margin-right: ${mr};` : ''}
    ${p => p.mt ? `margin-top: ${mt};` : ''}
`;

然后最终实现它，您可以执行以下操作：

<Label
  weight={700} 
  mr="5px"
</Label>

您可以使用margin 或mb、ml、mr 和mt。如果您同时使用margin 和mb。 mb 值将覆盖 margin 的底部值。

记住，像 mr="5px" 或 mr={"5px"} 那样实现它，而不是这样：mr={5px}。

【讨论】：