YSHUSH

리액트 라이브러리 (스타일링) 본문

Coding/React

리액트 라이브러리 (스타일링)

코딩; 2022. 9. 7. 02:28

1) styled-components

https://styled-components.com/

 

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾

styled-components.com

 

npm i styled-components

 

2) emotion

https://emotion.sh/docs/introduction

 

Emotion – Introduction

(Edit code to see changes)

emotion.sh

npm i @emotion/styled @emotion/react

jsx에서의 임포트문

/** @jsxImportSource @emotion/react */

 

https://npmtrends.com/@emotion/core-vs-@emotion/react-vs-styled-components

 

@emotion/core vs @emotion/react vs styled-components | npm trends

Comparing trends for @emotion/core 11.0.0 which has 4,045,362 weekly downloads and unknown number of GitHub stars vs. @emotion/react 11.10.4 which has 4,142,534 weekly downloads and unknown number of GitHub stars vs. styled-components 5.3.5 which has 4,223

npmtrends.com

지금은 emotion이 조금 더 우세한 경향을 보인다.

 

3) SASS

https://sass-lang.com/

 

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass-lang.com

npm i sass

'Coding > React' 카테고리의 다른 글

yarn 초기 설정(수정할때 오류날 경우)  (0) 2022.11.11
리액트 라이브러리 ( 상태관리 )  (0) 2022.09.09
리액트 라이브러리 ( Moking )  (0) 2022.09.08
리액트 라이브러리( UI )  (0) 2022.09.07
리액트 라이브러리 (Date)  (0) 2022.09.06
'Coding/React' Related Articles more