TypeScript: Extend React component props for styled component element

Question

i'm trying to extend a react components props in TypeScript so that it contains all the normal html button attributes , as well as react specific stuff like ref

My understanding is that the type React.HTMLProps is what i need, ( React.HTMLAttributes doesn't contain ref )

However, when trying to pass my props to a styled component the compiler complains.

My attempt 👇🏼 Codesandbox example: https://codesandbox.io/s/cocky-cohen-27cpw

Answer 1

Couple of things.

Change the typing to:

interface Props extends React.ComponentPropsWithoutRef<'button'> {
  loading?: boolean
  secondary?: boolean
  fullWidth?: boolean
}

That should fix the issue for you. I forked your sandbox and it gets rid of the error.

There is also a SO post that this come from that you can use: Using a forwardRef component with children in TypeScript - the answer details one way but also mentions the answer 1.

Answer 2

Thanks to all who helped me get to the bottom of this. What i actually needed was to be able to forward refs to my underlying styled component, i achieved this in TypeScript like this:

Answer 3

You are using the wrong attributes and SButton cannot access ref.

import React, { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
import { render } from "react-dom";
import styled, { css } from "styled-components";

interface Props extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
  loading?: boolean;
  secondary?: boolean;
  fullWidth?: boolean;
}

export const Button: React.FC<Props> = p => {
  const { ref, ...buttonProps } = p;
  return <SButton {...buttonProps}>{p.children}</SButton>;
};

export const SButton = styled.button<Props>(
  p => css`
    /*  */
  `
);

render(<Button>Hello world</Button>, document.getElementById("root"));

This uses the correct ButtonHTMLAttributes for your props. SButton does not accept ref, that is why its extracted from the button props with const { ref, ...buttonProps } = p; . This will leave buttonProps will everything from p except ref. Hope this helps.