reactjs - ¿Por qué el error de TypeScript "No hay sobrecarga que coincida con esta llamada" al usar estilo personalizado en react-select?

Estoy tratando de dar estilo a mi componente react select en mi aplicación de react con typescript sin éxito. Al seguir la documentación: https://react-select.com/styles#provided-styles-and-state, obtengo el siguiente error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReactSelectProps<string>>): ReactSelectClass<string>', gave the following error.
    Type '{ control: () => { width: number; }; }' has no properties in common with type 'CSSProperties'.
  Overload 2 of 2, '(props: ReactSelectProps<string>, context?: any): ReactSelectClass<string>', gave the following error.
    Type '{ control: () => { width: number; }; }' has no properties in common with type 'CSSProperties'.  TS2769

Ejemplo de código:

const inputStyle = {
    control: () => ({

        width: 200,
      }),

<Select 
       name="Name"
       options={options}
       style={inputStyle}
 />

¿Alguien sabe cómo usar estilos personalizados con TypeScript y React Select? Gracias.

Respuesta #1

Creo que tienes un error tipográfico: la propiedad style para Select debería ser styles (en plural).

La propiedad style (singular) normalmente se supone que es de tipo CSSProperties. Pero styles (plural) es un objeto con valores de función que devuelven CSSProperties. Así que TypeScript te está ayudando allí, aunque de manera algo críptica.

Respuesta #2

Puedes importar la interfaz CSSProperties desde 'react' y convertir el valor de retorno como CSSProperties de tu clave control:

import React, { CSSProperties } from 'react'

const inputStyle = {
  control: () => ({
    width: 200,
  } as CSSProperties),
}

Es porque control es del tipo styleFn, que es:

type styleFn = (base: CSSProperties, state: any) => CSSProperties;