Css 如何将typescript接口属性与边距属性一起使用？

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

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>
    )
}

界面道具{
重量：200 | 400 | 500 | 700 | 900；
}
const Label=styled.span`
保证金：0；
字体大小：${p=>p.weight | | 200}；
`;

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

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>
    )
}

render=（）=>{
返回(
不使用保证金权
您必须将
道具更新为以下内容：

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

注意：
mb
将代表
页边距底部
，依此类推

然后更新您的
标签
，如下所示：

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};` : ''}
`;

const Label=styled.span`
字体大小：${p=>p.weight | | 200}；
边距：${p=>p.margin？边距：0}；
${p=>p.mb？`页边距底部：${mb}；`:'''
${p=>p.ml？`左边距：${ml}；`:'''
${p=>p.mr？`右边距：${mr}；`:'''
${p=>p.mt？`页边空白顶部：${mt}；`:'''
`;

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

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