Styled Components를 Global에서 사용하기
Global에서 사용될 style 생성 및 적용
const size = {
mobile: '600px',
tablet: '900px',
laptop: '1200px',
desktop: '1800px',
}
const theme = {
mainColor: '#0a4297',
mobile: `(max-width: ${size.mobile})`,
tablet: `(max-width: ${size.tablet})`,
laptop: `(max-width: ${size.laptop})`,
desktop: `(min-width: ${size.desktop})`,
}
export default theme
출처
https://jsramblings.com/how-to-use-media-queries-with-styled-components/
How to use media queries with styled components
TL;DRMedia queries with styled components work the same as in CSS! const CardWrapper = styled.div` display: flex; flex-direction: row; @media (max-width: 768px) { flex-direction: column; } `; If you want a more involved example with defining different devi
jsramblings.com
https://www.howdy-mj.me/css/styled-components-with-global-style/
Styled Components를 Global에서 사용하기(w/반응형)
해당 글은 React를 기준으로 작성되었습니다. Styled Components란? Styled Components는 CSS-in-JS의 하나로, CSS를 하나의 컴포넌트로 만들어 주는 것이다. Styled Components 설치 Button 자체가 하나의 Component가 되
www.howdy-mj.me
https://www.mariokandut.com/how-to-use-media-queries-in-styled-components/
Media queries with styled components
Responsive styling using styled components
www.mariokandut.com
Styled-components ThemeProvider를 활용한 스타일 환경 구축
Styled-components ThemeProvide를 사용한 스타일 환경 구축 !
velog.io