Style Helpers
Media Queries
media
helper allows you to use CSS media queries with object styles.
import { media } from '@lib/styles'
function MyComponent() {
return (
<div css={{
display: 'none',
[media('md')]: {
display: 'block',
},
}}>
<Sidebar />
</div>
)
}
Please note that all available arguments for media()
are the breakpoints you have defined.
// src/lib/styles/helpers.js
export const breakpoints = {
md: '48em', // 768px
lg: '60em', // 960px
xl: '80em', // 1280px
}
...
UI Switcher
These 2 helpers help us do conditional rendering based on some conditions. The value of narrow
and wide
prop is a react element you want to render for that situation.
Viewport Size
This helper will render the target component that meets the condition in terms of viewport size.
import { Responsive } from '@lib/styles'
function MyComponent() {
return (
<div>
<Responsive
breakpoint="md"
narrow={null}
wide={<Sidebar />}
/>
</div>
)
}
Please note that the value of the breakpoint
prop must be one of the predefined breakpoints.
Device
This helper will render the target component that meets the condition in terms of device type.
import { Adaptive } from '@lib/styles'
function MyComponent() {
return (
<div>
<Adaptive narrow={null} wide={<Sidebar />} />
</div>
)
}
Please note that the value of the narrow
prop is for mobile while the value of the wide
prop is for tablet and desktop.