Garmaine Staff asked 2 years ago

Is it OK to define propTypes and defaultProps directly on the styled component? Otherwise I have to give a name to the default export; I just would like to keep it as it is. The component:

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

/**
 * This component renders a div with a specified color.
 */

export default ({ color, children }) => <Box color={color}>{children}</Box>;

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;

  color: white;
  font-weight: bold;
  font-size: 1.2rem;

  background-color: ${({ color }) => color};
  margin: 6px;
`;

Box.propTypes = {
  color: PropTypes.string,
}

Box.defaultProps = {
  color: "grey",
}