complete guide

flexbox example: styled component

code

import styled from "styled-components";

const CenterChildUsingFlex = styled.div`
  display: flex;  
  justify-content: center;
  align-items: center;
`;

usage

import styled from "styled-components";
import React from "react";

const Parent = styled(CenterChildUsingFlex)<{ width?: string, height?: string }>`
  background-color: black;
  
  width: ${props => props.width? props.width: '100%' };
  height: ${props => props.height? props.height: '100%'};
  max-width: 1366px;
  max-height: 768px;
`;

const Child = styled.div`
  background-color: white;
  width: 90%;
  height: 90%;
`;

const MainLayout: React.FC<{
  height?: string,
  width?: string
}> = ({height, width}) => {
  return (
    <Parent width={width} height={height}>
      <Child />
    </Parent>
  );
};

storybook

import React from "react";
import { storiesOf } from "@storybook/react";
import { host } from "storybook-host";
import MainLayout from "src/components/MainLayout/MainLayout";

storiesOf("MainLayout", module)
  .addDecorator(
    host({
      title: "A host container for components under test.",
      width: "600px",
      height: "600px",
      background: "#fff"
    })
  )
  .add("default", () => <MainLayout />);