Styled component function

styled-function.md

A function style for pulling out props in styled components.

/**
 * Better way to create functions within styled components...
 * ... if you want access to all / many of the props
 * @param {Object} args Any values you pass in when calling the function
 * @param {Object} props props passed into the styled component. e.g. theme
 */
const myFunc = (args) => (props = {}) => {
  console.log({ args }, { props });
};

usage:

const getVariant = () => (props = {}) => {
  const { variant, theme } = props;

  switch (variant) {
    case 'red':
      return `
        color: ${ theme.white};
        background-color: ${ theme.red};
      `;
    case 'white':
      return `
        color: ${ theme.black};
        background-color: ${ theme.white};
      `;
    default:
      return `
        color: ${ theme.white};
        background-color: ${ theme.black};
      `;
  }
};

const Button = styled('button')`
  box-sizing: border-box;
  -webkit-appearance: none;
  user-select: none;
  transition: all 250ms ease 0s;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  background: transparent;

  ${ getVariant() }
`;