Question 302552 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – My react project with "react": "^18.2.0", version and "react-select": "5.4.0", version, is getting errors

My react project with "react": "^18.2.0", version and "react-select": "5.4.0", version, is getting errors today, this project was running smoothly till yesterday.

When I’m trying to build my project it’s giving me this error below.

TS2322: Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type 'CSSObjectWithLabel'.   Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' 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'.
    17 | const customStyles: StylesConfig<ISelectorOption> = {
    18 |   menuPortal: (styles, _): CSSObjectWithLabel => {

   19 |     return {
       |     ^^^^^^^^
   20 |       ...styles,
       | ^^^^^^^^^^^^^^^^
   21 |       color: THEME.defaultHighLightColor,
       | ^^^^^^^^^^^^^^^^
   22 |       zIndex: 9999,
       | ^^^^^^^^^^^^^^^^
   23 |     };
       | ^^^^^^^

    24 |   },
    25 |   control: (styles, { isDisabled }): CSSObjectWithLabel => {
    26 |     return {

enter image description here

I tried deleting node_modules and package.lock.json and imported react-select 5.4.0 exact version still I’m getting the same issues

Tags:

2

Answers


  1. 0

    As a workaround, you can use type assertion on each entry in your override list:

    menuPortal: (styles, _): CSSObjectWithLabel => {
   return {
     ...styles,
     color: THEME.defaultHighLightColor,
     zIndex: 9999,
   } as CSSObjectWithLabel;
}

    Optionally, you could also drop the type declaration on the function.

    With react-select, the workaround might be necessary. As of this writing, types definitions for the library seem to be in need of some improvement.

    Login or Signup to reply.
  2. 0

    I was getting the same error (upgrading from react-select 4.? to 5.8)

    I just changed the base prop to any as a workaround.

    styles={{ menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search