본문 바로가기

styled-components

(11)
ThemeProvider 사용하기 (3) - 토글해서 GlobalStyle 바꾸기 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 1. 밝은 배경과 어두운 배경 각각에 사용할 배경색과 폰트색을 설정한다. 📂 src > themes > light.js..
ThemeProvider 사용하기 (2) - 토글 버튼 만들어서 theme 토글하기 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 일단 토글 버튼 만들기🌀 👩‍💻 전체 코드 import styled from "styled-components"; co..
ThemeProvider 사용하기(1) - 기본 문법 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 1. styled-components에서 ThemeProvider를 import한다. import { ThemeProv..
styled-components로 Spinner 만들기 (feat. keyframes helper) 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 🔗 참고 styled-components documentation에서 Animation부분 https://styled-..
번외) react-router-dom의 Link를 styled-components로 꾸미기(feat.useLocation) (하지만 난 NavLink가 좋다) 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 📝 시작점 styled-componets가 아닌 일반적인 React의 컴포넌트 (react-router-dom의 Lin..
번외) react-router-dom 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com import LogIn from "components/pages/LogIn"; import Home from "comp..
'css' helper와 props를 이용한 스타일링 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 📝 목표 styled-component의 'css' 헬퍼를 이용해서 props의 조건에 따른 스타일링을 속성을 좀더 보..
props를 이용한 conditional styles 이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다. 🔗링크 https://www.udemy.com/course/react-styled-components/ React styled components v5 (2021 edition) Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled components library www.udemy.com 🌞 목표 이번 시간에는 styled-components에 props를 넣어서 props 값에 따라 (조건적으로) 다른 ..