Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bonkrat opened this issue Oct 5, 2023 · 1 comment

Comments

@bonkrat
Copy link

bonkrat commented Oct 5, 2023

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};
  }
`;
@bryanjtc
Copy link

React 19 will remove support for default props. facebook/react#28733
Can this be fixed before that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants