🤫This is a private post👀
Styled Components Resources
A curated list of hints and tips for using styled-components.
Breakpoints
The first way I found how to do @media
queries in styled-components
was documented on a Gist.
This is a lift and drop from an old project:
1const sizes = {2 monitor: 1800,3 giant: 1500,4 desktop: 992,5 tablet: 768,6 phone: 376,7}89// iterate through the sizes and create a media template10export const media = Object.keys(sizes).reduce(11 (accumulator, label) => {12 // use em in breakpoints to work properly cross-browser and support users13 // changing their browsers font-size: https://zellwk.com/blog/media-query-units/14 const emSize = sizes[label] / 1615 accumulator[label] = (...args) => css`16171819`20 return accumulator21 },22 {}23)
Then to use it in the project:
1const PageContainer = styled.div`234567891011121314151617`
Back to Top