React - Margin Component

Margin.js

import PropTypes from 'prop-types';
import styled from "styled-components";

const Margin = styled.div`
  ${props => {
    const { top, right, left, bottom } = props;

    return `
      margin: ${top} ${right} ${left} ${bottom};
    `;
  }}
`;

Margin.propTypes = {
  top: PropTypes.string,
  right: PropTypes.string,
  left: PropTypes.string,
  bottom: PropTypes.string,
}

Margin.defaultProps = {
  top: '0px',
  right: '0px',
  left: '0px',
  bottom: '0px',
};

export default Margin;

Margin.tsx

import styled from "styled-components";

interface Props {
  top?: string;
  right?: string;
  left?: string;
  bottom?: string;
}

const Margin = styled.div<Props>`
  ${props => {
    const { top, right, left, bottom } = props;
    return `
      margin-left: ${left};
      margin-top: ${top};
      margin-right: ${right};
      margin-bottom: ${bottom};
    `;
  }}
`;

export default Margin;