与 props 共享 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

props 在 mixins 中自动提供。

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" />
  )
};

与 props 共享 css 样式化组件声明

Shared css declarations to styled component with props

css

import

reactjs

styled-components