How to retain StyleNames when Emotion types override being used | Mantine | Page 1

Reaching out as I've got no idea how to resolve this one. I have tried a bunch of things but can't figure it out. 😩

<Badge variant="filled" styles={(theme, {color}, u) => ({

Gives me:

(parameter) u: unknown

Styles has the type:

(property) StylesApiProps<{ props: BadgeProps; defaultRef: HTMLDivElement; defaultComponent: "div"; stylesNames: BadgeStylesNames; vars: BadgeCssVariables; variant: BadgeVariant; }>.styles?: Partial<Record<BadgeStylesNames, CSSProperties>> | ((theme: MantineTheme, props: BadgeProps, ctx: unknown) => Partial<...>) | undefined

styles has the right type:

Partial<Record<BadgeStylesNames

If I override with the emotion type:

import "@mantine/core";
import type { EmotionSx, EmotionStyles } from "@mantine/emotion";

declare module "@mantine/core" {
  export interface BoxProps {
    sx?: EmotionSx;
    styles?: EmotionStyles;
  }
}

But then the styleNames for props is deprecated:

(alias) type EmotionStyles = Record<string, CSSObject> | ((theme: MantineTheme, props: Record<string, any>, u: EmotionHelpers) => Record<string, CSSObject>)

Is there a way of not using the Emotion override and enhancing u to be EmotionHelpers?

I have tried to update StylesApiRecord type:

export type StylesApiRecord<
  Payload extends FactoryPayload,
  DataType,
> = Payload['compound'] extends true
  ? Payload['stylesNames'] extends string
    ? StylesRecord<Payload['stylesNames'], DataType>
    : never
  : Payload['stylesNames'] extends string
    ?
        | StylesRecord<Payload['stylesNames'], DataType>
        | ((
            theme: MantineTheme,
            props: Payload['props'],
            ctx: Payload['ctx'] | EmotionHelpers
          ) => StylesRecord<Payload['stylesNames'], DataType>)
    : never;

But then I get a huge issue with types.

Any advice appreciated! Thanks

Thanks!

How to retain StyleNames when Emotion types override being used

#How to retain StyleNames when Emotion types override being used