How to use spread props with Typescript using styled-components in React?

Question

So I am creating a UI component for my app to make styling consistent. That means, I need access to spread props for doing things like value, onChange etc.

This is what my TextInput component looks like:

import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
`;

export const TextInput = ({
  ...rest
}: DetailedHTMLProps<
  InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>) => (
  <>
    <StyledInput type="text" {...rest} />
  </>
);

But styled-components is giving me an error: Types of property 'ref' are incompatible. What could be the problem?

Answer 1

this question is similar to yours and answered, you might want to check it Using 'ref' on React Styled Components is not working