Shared css declarations to styled component with props

Question

I have some css declarations shared with multiple style-components.

For example:

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

So i know can add file with:

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

and then import it and use:

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

But is there a way to this and still have the current component props used inside ${baseStyled} ?

Answer 1

props are automatically provided inside of 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" />
  )
};