Define your breakpoints in the breakpoints
object. Add as many breakpoints as you need.
export const { styled, css } = createStyled({
breakpoints: {
bp1: (rule) => `@media (min-width: 640px) { ${rule} }`,
bp2: (rule) => `@media (min-width: 768px) { ${rule} }`,
bp3: (rule) => `@media (min-width: 1024px) { ${rule} }`,
bp4: (rule) => `@media (min-width: 1280px) { ${rule} }`,
},
});
Note: Choose whichever naming convention you prefer. We recommend either
bp1,bp2,bp3,bp4etc. orsm,md,lg,xletc.
Once configured, you can apply different variants at different breakpoints. You must use the
In the example below, we apply coral
initially, then the purple
color variant at the bp2
breakpoint, and the tomato
color variant at the bp3
breakpoint.
const Button = styled('button', {
alignItems: 'center',
backgroundColor: 'royalblue',
border: 'none',
borderRadius: '9999px',
color: 'white',
display: 'inline-flex',
fontWeight: 500,
lineHeight: '1',
height: '$5',
paddingLeft: '10px',
paddingRight: '10px',
variants: {
color: {
coral: {
backgroundColor: 'coral',
},
purple: {
backgroundColor: 'purple',
},
tomato: {
backgroundColor: 'tomato',
},
},
},
});
render(
<Button color={{ initial: 'coral', bp2: 'purple', bp3: 'tomato' }}>Responsive button</Button>
);
Note: If you're using TypeScript, your variants will be typed.
const Button = styled('button', {
height: '35px'
// apply styles to the `bp1` breakpoint
bp1: {
height: '45px'
}
});
Note: In most cases, we do not recommend applying responsive breakpoints inline. Ideally, your component styles should be immutable.