Set-up reusable responsive breakpoints.
Define your media at-rules in the media
object. You can add as many as you need.
export const { styled, css } = createStitches({
media: {
bp1: '(min-width: 640px)',
bp2: '(min-width: 768px)',
bp3: '(min-width: 1024px)',
},
});
Note: Choose the naming convention you prefer. We recommend either bp1
, bp2
, bp3
etc. or sm
, md
, lg
etc.
Once configured, you can apply different variants at different breakpoints.
In the example below, we apply the violet
color variant at the bp2
condition.
const Button = styled('button', {
// base styles
variants: {
color: {
violet: {},
gray: {},
},
},
});
() => (
<Button
color={{
'@bp2': 'violet'
}}
>
Button
</Button>
);
Note: If you're using TypeScript, your variants will be typed.
You must use the @initial
breakpoint to declare the initial variant before any breakpoints are applied.
In the example below, we apply gray
initially, then the violet
color variant at the bp2
condition.
const Button = styled('button', {
// base styles
variants: {
color: {
violet: {},
gray: {},
},
},
});
() => (
<Button
color={{
'@initial': 'gray',
'@bp2': 'violet'
}}
>
Button
</Button>
);
const Button = styled('button', {
// base styles
'@bp1': {
// Styles for bp1
},
});
Note: In most cases, we do not recommend applying responsive breakpoints inline. Ideally, your component styles should be immutable.