styled-components 전역 스타일링 (Global style)
·
TECH
컴포넌트 별로 스타일을 적용할 수 있지만 reset과 같은 공통 css는 전역으로 선언을 해야한다. npm으로 설치해서 사용하는 방법(https://github.com/zacanger/styled-reset)과 직접 스타일을 만들어서 import하는 방법이 있다. 아래는 직접 스타일 파일을 만들어서 import하는 방법이다. styled-components 에서는 createGlobalStyle을 제공해 전역으로 스타일링 할 수 있게 도와준다. reset.css - https://github.com/zacanger/styled-reset/blob/master/src/index.ts 1. GlobalStyle 파일을 만들고 reset css를 선언한다. // GlobalStyle.tsx import { c..
styled-components로 theme적용하기 with Typescript
·
TECH
1. styled.d.ts 파일을 만들어서 theme에 들어가는 속성 타입 정의 // src/styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { textColor: string; bgColor: string; } } 2. theme.ts 파일 만들고 테마 값 선언 // src/theme.ts import { DefaultTheme } from "styled-components"; export const lightTheme:DefaultTheme = { textColor: '#000', bgColor: '#fff' } export const darkTheme:Def..
styled-components 기본 문법
·
TECH
styled-compoenents 없이 스타일을 선언하는방법 1. style.css파일을 만들고 글로벌로 선언한다. // index.js import "./style.css" 2. 인라인 스타일 사용 // app.js function App() { return 안녕하세요. } 3. css 모듈사용하기 // Movie.module.css .movie { background-color: red; } // app.js import styles from './Movie.module.css' //파일명 module.css function App() { return 안녕하세요. } css 모듈을 사용하면 클래스명을 해시로 만들어줘서 충돌날일이 없다. 설치 npm i styled-components 기본문법 impo..
styled-components, emotion 비교
·
TECH
styled-components, emotion 비교 프로젝트를 구축하기 전 CSS-in-JS로 유명한 두개 라이브러리 styled-components와 emotion을 비교하고 우리 환경에 맞는 라이브러리를 택하기 위해서 비교를 하게 되었다. styled-components와 emotion 문법만 조금 다를 뿐 동일한 기능을 가지고 있어서 더 선택하기 힘들었던 것 같다. 트렌드 트렌드를 확인해 보면 비슷하게 사용되고 있는것을 볼 수 있다. @emotion/core 10버전 -> @emotion/react 11버전 npm trends 크기 styled-components가 emotion에 비해 크기가 크지만 유의미한 차이는 아닌 것같다. styled-components@5.3.6 https://bundl..