React:style-components 사용법

styled-components ?

Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리

🤔 왜 사용하는데 ?

Component가 많을 경우, class명이 중복될 수 있는 문제가 발생할 수 있다. 이를 방자하기 위해 class 선언 없이 component에 css를 직접 장착하는 방식을 사용하면 각 components간의 중복이 발생할 필요도 없고, 따라서 class명이 중복되는 일도 막을 수 있기때문

---

🔧 설치하는 방법

npm

npm install --save styled-components

npm install styled-components

yarn

yarn install --save styled-components

yarn add styled-components

---

사용하려는 파일 상단에 import 해주기

import styled from "styled-components";

---

사용법

export const SlideWrap = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
`;

---

👾 관련 오류

Can't resolve styled-components 오류

이유 : 본체를 설치 안하고 본체 명세서만 설치를 해서 그럼
해결법 : npm install --save styled-components