如何在 React 中使用样式组件将传播道具与 Typescript 一起使用？答案

【问题标题】：How to use spread props with Typescript using styled-components in React?如何在 React 中使用样式组件将传播道具与 Typescript 一起使用？
【发布时间】：2022-02-23 08:03:54
【问题描述】：

所以我正在为我的应用创建一个 UI 组件以使样式保持一致。这意味着，我需要访问传播道具来执行value、onChange 等操作。

这就是我的TextInput 组件的样子：

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} />
  </>
);

但是styled-components 给了我一个错误：Types of property 'ref' are incompatible. 可能是什么问题？

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

此问题与您的问题相似并已回答，您可能需要检查一下 Using 'ref' on React Styled Components is not working

【讨论】：