styled-component-example.jsx

import _ from "lodash";
import React, { PureComponent } from "react";
import { render } from "react-dom";
import styled from "styled-components";

const createStyles = props => {
  const {
    padding,
    buttons,
    pt,
    pb,
    pr,
    pl,
    mt,
    mr,
    ml,
    mb,
    flexDirection,
    alignItems,
    flex,
    mobileCentre,
    wrap
  } = props;

  let propStyles = "";

  if (_.isNumber(flex)) {
    propStyles += `
        flex: ${flex};
      `;
  }

  if (buttons) {
    propStyles += `
      width: 50%;
      margin: 3rem auto;

      @media only screen and (max-width: 991px) {
        width: 100%;

        > button {
          margin: 15px 0;
        }
      }
    `;
  }

  if (padding) {
    propStyles += `
            padding: ${padding};
        `;
  }
  if (pt) {
    propStyles += `
            padding-top: ${pt};
        `;
  }
  if (flexDirection) {
    propStyles += `
            flex-direction: ${flexDirection};
        `;
  }

  if (alignItems) {
    propStyles += `
            align-items: ${alignItems};
        `;
  }

  if (pb) {
    propStyles += `
              padding-bottom: ${pb};
          `;
  }

  if (pr) {
    propStyles += `
              padding-right: ${pr};
          `;
  }

  if (pl) {
    propStyles += `
              padding-left: ${pl};
          `;
  }

  if (mt) {
    propStyles += `
        margin-top: ${mt};
      `;
  }

  if (mb) {
    propStyles += `
        margin-bottom: ${mb};
      `;
  }

  if (ml) {
    propStyles += `
        margin-left: ${ml};
      `;
  }

  if (mr) {
    propStyles += `
        margin-right: ${mr};
      `;
  }

  if (mobileCentre) {
    propStyles += `
            @media only screen and (max-width: 400px) {
              display: flex;
              flex-direction: column;
            }
          `;
  }

  if (wrap) {
    propStyles += `
        flex-wrap: wrap;
      `;
  }

  return propStyles;
};

const Box = styled.div`
  display: ${props => (!!props.flex ? "flex" : "block")};
  justify-content: ${props => props.justify || "initial"};
  ${createStyles};
`;

class MyComponent extends PureComponent {
  render() {
    return (
      <Box
        flex
        padding={"50px"}
        flexDirection={"column"}
        justify={"center"}
        mt={"10px"}
        mb={"25px"}
      >
        <div>I'm a super flexible div</div>
        <div>using styled-components.</div>
      </Box>
    );
  }
}

render(<MyComponent />, document.getElementById("root"));