Is there a way to override the default breakpoint types?

[angusd3v]

The npm page for this library lists these instructions for setting the types for themed breakpoints:

import {DefaultTheme} from 'styled-components';
 
declare module 'styled-components' {
  export interface DefaultTheme {
    breakpoints: {
      [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
    };
  }
}

However, even after doing this, the only valid types to pass to breakpoint() are desktop, tablet, and mobile. Is this functionality currently working? The types look hardcoded to those original values:

export declare const breakpoint: (breakpointA: import("./types").DefaultBreakpointName, breakpointB?: "mobile" | "tablet" | "desktop" | undefined) => CSSFunction;

[jameslnewell]

👋 Thanks for raising the issue!

Note, this issue refers to v3 which is still a preview release. I'd screwed up the npm tags (fixed now, my apologies)!

You're correct, I wonder why Typescript is compiling out the types of the second parameter. In the source code there's no difference (other than the second is optional).

Any ideas?

[umakantp]

There is not fix for this?

[umakantp]

I'm getting an error in typescript either

src/components/grid/container/container.styles.ts:27:16 - error TS2345: Argument of type '"sm"' is not assignable to parameter of type 'DefaultBreakpointName'.

27   ${breakpoint('sm')`
                  ~~~~

or I get if I use static

src/components/grid/container/container.styles.ts:2:9 - error TS2614: Module '"styled-components-breakpoint"' has no exported member 'createStatic'. Did you mean to use 'import createStatic from "styled-components-breakpoint"' instead?

2 import {createStatic} from 'styled-components-breakpoint'
          ~~~~~~~~~~~~

Is this module dead? I mean I'm not seeing any updates on it since long

[NyFco]

it's 2023 and I'm still getting this error `${breakpoint('md')`` ````````