Skip to content

Warning: Styled(button): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. #201

Closed
@bonkrat

Description

This error is printing in the logs:

Warning: Styled(button): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

defaultProps is being deprecated by React: facebook/react#25699

I believe this is the culprit,

Button.defaultProps = { type: 'button' };

I believe the recommended way to set default props now is to use JS destructuring and default values, something like this may work for the Button component:

interface ButtonBaseProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
}

const ButtonBase = ({ type = 'button', ...props }: ButtonBaseProps) => {
  return <ButtonBase type={type} {...props} />;
};

const Button = styled(ButtonBase)<{ hideBackground?: boolean }>`
  appearance: none;
  margin: 0;
  border: 0;
  color: white;
  padding: 5px !important;
  border-radius: 0 !important;
  background: ${(props: { hideBackground?: boolean }) =>
    props.hideBackground ? `` : `${colors.blue} !important`};
  transition: 0.2s all;

  &:hover {
    background: ${colors.lightBlue};
  }
`;

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions