borderRadius property triggers typescript error when theme values are used

[negrudev]

Typescript Error:

(property) borderRadius?: number | {
[x: string]: number | undefined;
} | undefined
Type 'string' is not assignable to type 'number | { [x: string]: number | undefined; } | undefined'.ts(2322)

Defined in theme as:

const theme = {
borderRadii: {
s: 4,
m: 8,
l: 16,
xl: 24,
xxl: 48,
},
}

Used as:

<Box borderRadius='s'>{content}</Box>

[David Leuliette]

@negrudev
Same issue as #44

I was confused by the error output as well but you can fix it by adding breakpoints.

Example:

  breakpoints: {
    phone: 0,
    tablet: 768,
  },
  borderRadii: {
    xs: 4,
    s: 16,
    m: 24,
    l: 64,
  },

[David Leuliette]

Hey @negrudev

If your problem is solved can you please close the issue?
It sparks joy for maintainers ✨

['Fisayo]

@negrudev
Same issue as #44

I was confused by the error output as well but you can fix it by adding breakpoints.

Example:

  breakpoints: {
    phone: 0,
    tablet: 768,
  },
  borderRadii: {
    xs: 4,
    s: 16,
    m: 24,
    l: 64,
  },

This doesn't work for me. I already had breakpoints in my theme by the time I ran into this error.

[Mohamed Shaban]

@fisayowatti Can you provide more information that we can use to reproduce the issue?

[Tai-Lun Tseng]

I've had this issue for a while, and somehow I just managed to solved it.

TLDR: add MyTheme generic type in the createBox invocation:

const Box = createBox<MyTheme>();

---

The problem I was facing is that my Box component can't recognize my borderRadii settings in the theme, resulted in a TS error message:

// Type 'string' is not assignable to type 'ResponsiveValue<number, BaseTheme> | undefined'
<Box borderRadius="m" />

My theme configuration is almost identical:

const theme = createTheme({
  // ...
  breakpoints: {phone: 0},
  borderRadii: spacing,
  // ...
  spacing,
  // ...
});

I was defining my Box component without specific theme configuration, though:

const Box = createBox();

That means createBox is invoked with BaseTheme as the theme configuration. By default, BaseTheme does not provide a borderRadii config, thus the BorderProps in restyleFunctions.ts will have the following settings:

[Key in keyof typeof borderRadiusProperties]?: ResponsiveValue<Theme['borderRadii'] extends {} ? keyof Theme['borderRadii'] : number, Theme>;
// becomes
[Key in keyof typeof borderRadiusProperties]?: ResponsiveValue<number, BaseTheme>;

So, by adding MyTheme to the createBox invocation:

const theme = createTheme({ ... });
type MyTheme = typeof theme;

const Box = createBox<MyTheme>();

will make the BorderProps resulted in the following settings:

[Key in keyof typeof borderRadiusProperties]?: ResponsiveValue<Theme['borderRadii'] extends {} ? keyof Theme['borderRadii'] : number, Theme>;
// becomes
[Key in keyof typeof borderRadiusProperties]?: ResponsiveValue<keyof MyTheme['borderRadii'], MyTheme>;

I solved this issue after hours of TS digging; hope this will help.

[Ahmed Eid]

I kinda have a similar issue

(property) borderRadius?: ResponsiveValue<number, BaseTheme> | undefined
Type 'string' is not assignable to type 'ResponsiveValue<number, BaseTheme> | undefined'.ts(2322)
restyleFunctions.d.ts(95, 5): The expected type comes from property 'borderRadius' which is declared here on type 'IntrinsicAttributes & BackgroundColorProps<BaseTheme> & OpacityProps<BaseTheme> & VisibleProps<BaseTheme> & ... 12 more ... & RefAttributes<...>'

[Marek Fořt]

@a-eid please open a new issue if you still are having a problem with this. Otherwise, it seems the original issue has been resolved, so I'm closing this.