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.

Sign up for GitHub

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

Jump to bottom

Ability to use an object with the value representing the css type #173

Open

adrhumphreys opened this issue Nov 23, 2022 · 0 comments

adrhumphreys commented Nov 23, 2022

Sorry for the terrible title, what I effectively want to be able to do is define an object that has responsive values

const breakpoints = {
  xs: 0,
  sm: 480,
  md: 768,
  lg: 1024,
};

type Breakpoint = keyof typeof breakpoints;

type ResponsiveProps<T> = {
  [Type in Breakpoint]?: T;
};

type ResponsiveStyle = CSS.Properties<string | number | ResponsiveProps<string | number>>;

const example: ResponsiveStyle = {
  height: 40,
  width: { xs: 20, md: 768 },
  display: { xs: "none", md: "block" },
};

When I do this I lose the ability to verify the types and anything that has a set of properties (e.g. display) will throw an error

Does anyone know a way to achieve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment