react - scss/css Module/styled-components

https://classic.yarnpkg.com/lang/en/

Yarn

npm -> yarn

리액트 컴포넌트 스타일링 하기

1. scss 사용하기

yarn add node-sass

npm install --save-dev sass sass-loader mini-css-extract-plugin

 

yarn start / npm start

 

yarn add classname

classname 라이브러리 문자열, 배열, 객체들을 전달하여 문자열을 조합

ex) classNames("button", "small") => "button small"

ex) classNames(['button','large']) => "button large"

ex) classNames({button: true}) => "button"

ex) classNames({button: false}) => ""

ex) classNames('button',{bar: true, duck: false},'abc') => "button bar abc"

 

2. css Module

css 클래스 중첩되는 것을 방지

.module.css

style.module.css

.box {

    background: green;

}

main.module.css

.box {

    background: red;

}

 

3. styled-components / emotion / styled-jsx

Css in JS

yarn add styled-components