typescript - 如何公开 props 类型并在样式化组件中使用它

Question

我很抱歉我的英语不好，我会尽力而为。

您好，我是 Styled 组件的新手。

我想改变按钮的样式并包装它。

但是当我试图将包装组件的 prop 传递给 Styled 组件时，我得到了一个类型错误。

我不知道我做错了什么。

下面是我的代码。

// Button/styles.ts
import React from 'react'
import styled from 'styled-components'

export const Button = styled.button<React.HTMLProps<HTMLButtonElement>>`
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.23);
  padding: 5px 15px;
  border-radius: 4px;
  &:focus {
    outline: none;
  }
  &:focus-visible {
    outline: none;
  }
`

// Button/Button.ts
import React from 'react'
import * as Styles from './styles'

export type ButtonProps = React.HTMLProps<HTMLButtonElement>

const Button = (props: ButtonProps) =>
  <Styles.Button {...props}/> // << TypeError!

export default Button

- - 编辑

我附上了我的语法错误消息。

标签： typescriptstyled-components

Answer 1

使用React.ComponentPropsWithoutRef<"button">而不是React.HTMLProps<HTMLButtonElement>.

HTMLProps类型太宽。

https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/