Responsive defaultVariant

[0xping]

why can't use responsive styles as a default variant?

the Container component is a great example :

// stitches.config
media: {
  sm: `(min-width: 576px)`,
  md: `(min-width: 768px)`,
  lg: `(min-width: 992px)`,
};

// Container.tsx
const Container = Styled("div", {
  variants: {
    size: {
      sm: {...},
      md: {...},
      lg: {...},
    },
    /*-------------------------------*/
    defaultVariants: {
      size: {
        "@sm": "sm",
        "@md": "md",
        "@lg": "lg",
      },
    },
    /*-------------------------------*/
  },
});

[prateekbisht23]

The reason you can't use responsive styles inside defaultVariants is because defaultVariants only supports static values — it’s evaluated once, not per breakpoint. Media queries like @sm, @md, etc., are part of the style rules, not the variant selection logic.

✅ What to do instead:

Move your responsive logic into the styles of a single variant:

const Container = styled('div', {
  variants: {
    size: {
      responsive: {
        '@sm': { maxWidth: '540px' },
        '@md': { maxWidth: '720px' },
        '@lg': { maxWidth: '960px' },
      },
    },
  },
  defaultVariants: {
    size: 'responsive',
  },
});

This way, you get a responsive default without trying to apply media queries inside defaultVariants.

Hope that clears it up!!