reactjs - Problema con Typescript en onClick con styled-components

Estoy usando un componente Icon personalizado de la siguiente manera:

<Icon onClick={() => {}} />

Sin embargo, TypeScript subraya el Icon y muestra el siguiente mensaje, que no consigo entender del todo:

Property 'onClick' does not exist on type 'IntrinsicAttributes & Pick<Pick<Props, "className" | "name"> & Partial<Pick<Props, never>>, "className" | "name"> & { theme?: any; } & { as?: "symbol" | "object" | ... 174 more ... | undefined; }'.ts(2322)

Mi componente Icon es un styled-component como se ve a continuación:

interface Props {
  name: string
  className?: string
}

const Icon = styled(({name, className, ...props}: Props) => <i className={`material-icons ${className}`} {...props}>{name}</i>)``

Pude silenciar TypeScript agregando lo siguiente a la declaración de la interfaz de Icon para permitir cualquier propiedad:

[x: string]: any

pero se siente como un truco, y me gustaría entender el problema y encontrar una solución adecuada.

Curiosamente, si uso la misma forma en un componente Button personalizado, no obtengo el error:

<Button onClick={() => {}} />

const Button = styled.button``

Respuesta #1

Tu definición de prop para Icon le dice a TypeScript que solo name y className son propiedades válidas.

interface Props {
  name: string
  className?: string
}

Si también quieres permitir onClick, tienes que añadirlo:

interface Props {
  name: string;
  className?: string;
  onClick: (e: Event) => void;
}

o si quieres permitir todas las propiedades, que son válidas para <i> usas lo siguiente:

interface Props extends React.HTMLAttributes<HTMLElement> {
  name: string
}