emotion.js

import { css } from 'emotion';
import styled from 'react-emotion';

const box = props => css`
composes:
  ${display(props)}
  ${flex(props)}
  ${direction(props)}
  ${alignItems(props)}
  ${alignSelf(props)}
  ${justifyContent(props)}
  ${alignContent(props)}
  ${margin(props)}
  ${padding(props)};`;

export const Box = ({ as, ...props }) => {
  const Component = styled(as)`${box};`;
  return <Component {...props} />;
};

I would not create a new styled component on every render. I would do something like this.

const box = props => css`
  ${display(props)}
  ${flex(props)}
  ${direction(props)}
  ${alignItems(props)}
  ${alignSelf(props)}
  ${justifyContent(props)}
  ${alignContent(props)}
  ${margin(props)}
  ${padding(props)};`;
 
const Box = {}
Box.Div = styled('div')`${box}`
Box.A = styled('a')`${box}`
// .. and whatever other elements you need.
//... you could write a loop to do this for you.

export default Box

const box = props => css`
  ${display(props)}
  ${flex(props)}
  ${direction(props)}
  ${alignItems(props)}
  ${alignSelf(props)}
  ${justifyContent(props)}
  ${alignContent(props)}
  ${margin(props)}
  ${padding(props)};`;

const createBox = (tag) => styled(tag)`${box}`

const A = createBox('a')