Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
immerrr opened this issue Aug 27, 2024 · 1 comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet

Comments

@immerrr
Copy link

immerrr commented Aug 27, 2024

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.

@immerrr immerrr added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet
Projects
None yet
Development

No branches or pull requests

2 participants
@immerrr and others