TypeScript error: 'CSSObjectWithLabel' is not assignable to type 'CSSProperties | undefined' (react-select v5.8.0 vs @types/react v18.3.3)

[immerrr]

I'm following the docs regarding overriding the different components of a select, and I'm getting an error when passing getStyles(...) into the returned div element by doing smth like <div ... style={getStyles("menuList", props)}> (see the sandbox)

The error is as follows:

(property) React.HTMLAttributes<T>.style?: React.CSSProperties | undefined

typescript [2322]: Type 'CSSObjectWithLabel' is not assignable to type 'CSSProperties | undefined'.
  Type 'CSSObjectWithLabel' is not assignable to type 'CSSProperties'.
    Types of property 'accentColor' are incompatible.
      Type 'readonly string[] | AccentColor | readonly AccentColor[] | undefined' is not assignable to type 'AccentColor | undefined'.
        Type 'readonly string[]' is not assignable to type 'AccentColor | undefined'.
          Type 'readonly string[]' is not assignable to type 'string & {}'.
            Type 'readonly string[]' is not assignable to type 'string'.

Looks like React's builtin CSSProperties don't like array values (string[] | AccentColor[]), which makes sense given that React.CSSProperties are based off the non-fallback variant of csstype.Properties in @types/react:18.3.3:

import * as CSS from 'csstype';
// <...snip...>
    export interface CSSProperties extends CSS.Properties<string | number> {}

And react-select imports CSSObject from @emotion/react which does allow fallback values:

import * as CSS from 'csstype';
// <...snip...>
export type CSSProperties = CSS.PropertiesFallback<number | string>;
// <...snip...>
export type CSSPropertiesWithMultiValues = {
    [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>>;
};
// <...snip...>
export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}

I quick workaround would probably be to do something like <div ... style={getStyles("menuList", props) as React.CSSProperties}>, but I'm not sure if putting type assertions everywhere is going to cause issues down the road.

[Akuukis]

I have a similar problem, see repro examples below. Same behavior using either TS 4.9.5 or TS 5.5.4

const exampleOkForContext = <Select
  // ...
  styles={{
    control: (styles, state) => ({
      ...styles,
    }),
  }}
/>

/**
 * Type '{ borderRadius: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[]; alignContent?: readonly string[] | Property.AlignContent | Property.AlignContent[]; ... 954 more ...; label?: string; }' is not assignable to type 'CSSObjectWithLabel'.
 *   Type '{ borderRadius: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[]; alignContent?: readonly string[] | Property.AlignContent | Property.AlignContent[]; ... 954 more ...; label?: string; }' is not assignable to type 'CSSObject'.
 *     Property 'accentColor' is incompatible with index signature.
 *       Type 'AccentColor | readonly string[] | AccentColor[]' is not assignable to type 'CSSInterpolation'.
 *         Type 'readonly string[]' is not assignable to type 'CSSInterpolation'.
 *           Type 'readonly string[]' is not assignable to type 'ArrayCSSInterpolation'.ts(2322)
 * styles.d.ts(40, 56): The expected type comes from the return type of this signature.
 */
const exampleThatErrors = <Select
  // ...
  styles={{
    control: (styles, state) => ({
      ...styles,
      borderRadius: 8,
    }),
  }}
/>


const exampleWorkaround = <Select
  // ...
  styles={{
    control: (styles, state) => ({
      ...styles,
      borderRadius: 8,
    } as CSSObjectWithLabel),
  }}
/>

[gerdablum]

Any updates on this? I am encountering the same problem

[antiantivirus]

I encountered this problem too. Upgrading to 5.10.1 fixed it for me.