Javascript 如何在使用样式化组件和react的条件下对div应用边距？

我想使用react和typescript为样式化组件应用基于道具的边距

下面是我的代码

function Parent() {
    return (
        <Child margin='variant'/>
    );
}

interface Props {
    margin?: any;
}

function Child({margin}: Props) {
    return (
        <Wrapper margin={margin}/>
    );
}

const Wrapper = div<{margin: any;}>`
   margin: 0 4px; //usually a margin of 0 4px should be used. if this child is called from parent 
   //component then it should use 0 4px 4px 8px;

`;

函数父函数（）{
返回(
);
}
界面道具{
保证金？：任何；
}
函数子项（{margin}:Props）{
返回(
);
}
常量包装器=div`
利润率：0.4px//通常应使用0 4px的裕度。如果从父级调用此子级
//组件则应使用0 4px 4px 8px；
`;

此子组件用于两个组件，一个在父组件中，另一个在子组件中

当从父组件调用此子组件时，它应使用0 4px 4px 8px的边距，如果不是，则应使用0 4px的边距

如何修改上述代码。有人能帮我吗。谢谢。

你需要

const Wrapper=styled.div`
边距：${（props）=>props.margin | |“0 4px”}；
`;
//利润率：0.4px4px.8px；
测试
//利润率：0.4px；
试验

您需要

const Wrapper=styled.div`
边距：${（props）=>props.margin | |“0 4px”}；
`;
//利润率：0.4px4px.8px；
测试
//利润率：0.4px；
试验

const Wrapper = styled.div`
  margin: ${(props) => props.margin || "0 4px"};
`;

// margin: 0 4px 4px 8px;
<Wrapper margin="0 4px 4px 8px">test</Wrapper>

// margin: 0 4px;
<Wrapper>test</Wrapper>