Question

我有如下界面

export interface Spacing {
    mb?:number;
    mt?:number;
    ml?:number;
    mr?:number;
}

我用来定义样式组件的道具

export const Button = styled.button<Spacing>`
    background:var(--colorOne);
    color:white;
    padding:1.25rem 2.5rem;
    border:none;
`

我希望能够添加像 mb={2} (margin-bottom: 2rem) 或 mt={3} (margin-bottom:3rem) 之类的道具，就像引导实用程序类 mb-4或 mt-3 等。

例如

<Button mt={3}>Test</Button>

如果我将 mt={3} 之类的道具传递给我的 Button 样式组件，我如何有条件地呈现 'margin-top:3rem'

我知道我可以做到

export const Button = styled.button<Spacing>`
    ${({mb}) => mb && `margin-bottom:${mb}rem`}
    ${({ml}) => ml && `margin-left:${ml}rem`}
    ${({mr}) => mr && `margin-right:${mr}rem`}
    ${({mt}) => mt && `margin-top:${mt}rem`}
    background:var(--colorOne);
    color:white;
    padding:1.25rem 2.5rem;
    border:none;
`

但是我想将这个 Spacing 接口用于更多组件，如果我必须为每个组件添加所有这些，那就太臃肿了。有没有更好的方法来实现这一点而无需过多重复？

为样式组件制作间距道具（打字稿）

0 个答案: