2func-spacer.js

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

// styled-components.js
const Root = styled.div`
$({
 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};
 `
`;