Why "No overload matches this call" TypeScript Error when using custom style in react-select?

user_7804993 0
Viewed 3685

I am trying to style my react select component in my typescript react app without success. When following the docs: https://react-select.com/styles#provided-styles-and-state, I get the following 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

Code example: 

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

        width: 200,
      }),

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

Anyone knows how to use custom styling with typescript and react select? Thanks.

react-select typescript reactjs
2 Answers

You can import CSSProperties interface from 'react' and cast the return value as CSSProperties of your control key:

import React, { CSSProperties } from 'react'

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

It is because control is styleFn type which is:

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

I believe you have a typo: the style prop for Select should be styles (the plural).

The style (singular) property normally is supposed to be of type CSSProperties. But styles (plural) is an object with function values that return CSSProperties. So typescript is helping you out there, albeit somewhat cryptically.

user_80318150
Related