2func-solutionish.js

const Spacer = ({
  top, left, bottom, right, children, sm, md, lg, xl,
}) => {
  return (
  <Root
    top={ top }
    left={ left }
    bottom={ bottom }
    right={ right }
    sm={sm}
    md={md}
    lg={lg}
    xl={xl}
  >
    {children}
  </Root>
  );
};

// styled-components.js
const baseStyles = ({ top, left, right, bottom }) => css`
  margin-top: ${top ? unitizedPx(top) : null};
  margin-right: ${right ? unitizedPx(right) : null};
  margin-bottom: ${bottom ? unitizedPx(bottom) : null};
  margin-left: ${left ? unitizedPx(left) : null};
`;

export const Root = styled.div`
  ${({ top, left, right, bottom, sm, md, lg, xl }) => `
  ${baseStyles({ top, left, right, bottom })}
  ${sm && baseStyles(sm)}
  ${md && baseStyles(md)}
  ${lg && baseStyles(lg)}
  ${xl && baseStyles(xl)}
  `}
`;