将css声明共享到具有道具的样式组件

Question

我有一些css声明与多个样式组件共享。

例如：

margin-top:${props.marginTop};
margin-bottom:${props.marginBottom};

所以我知道可以添加文件与：

export const baseStyles = css`
margin-top: 10px;
margin-bottom: 10px;
`;

然后导入并使用：

const MyComponent = styled.div`
${(props: Props) => {
return css`
${baseStyles};
`;
}}
`;

但是有没有办法做到这一点，并且仍然在${baseStyled}中使用当前的组件道具？

Answer 1

道具是在mixin内部自动提供的。

export const baseStyles = css`
margin-top: ${(props) => props.marginTop};
margin-bottom:${(props) => props.marginBottom};
`;
const MyComponent = styled.div`
${baseStyles}
`;
const App = () => {
return (
<MyComponent marginTop="12px" marginBottom="16px" />
)
};