3-3. CSS in React

Reactjs에서 CSS를 활용하는 3가지 방법 - 3. styled-components

 

styled-components 는 JS 와 CSS가 분리된 것을 보완하는 가장 널리 쓰이는 방법!

 

별도 설치가 필요하다

yarn add styled-components 

npm install styled-components

설치 완료~!

 

styled-components를 사용할 컴포넌트 내에서 import 해 사용한다

import styled from "styld-components";

 

이전 포스팅과 동일하게 Header의 ul태그에 스타일을 주고 싶다면!

const List = styled.ul`
	display: flex; 

	&:hover { background-color: blue; } 
`;

위와 같이 사용할 수 있다!

 

styled-components 를 사용해 스타일을 정의하는 요소는 컴포넌트 취급을 하기 때문에 변수의 첫글자는 대문자로 선언해주어야함!

styled.{html 요소} 그리고 ``(backtics)내 원하는 css 요소들을 입력해주면 된다.

&:hover 와 같이 해당컴포넌트의 부가적인 이벤트 옵션에 대해서도 함께 지정이 가능하다.

그리고 기존에 ul태그가 있던 위치에 List 컴포넌트를 넣어주면 끝!

 

만약 html 요소가 아닌 컴포넌트에 styled-components를 적용해 스타일을 커스텀하고 싶다면

const 변수명 = styled(커스텀할컴포넌트)``;

위와 같이 작성해주고! 마찬가지로 백틱내부에 스타일을 선언해주면 된다!

 

그저 html코드, ex) div, span 등 의 나열보다는 

컴포넌트의 이름을 지을수 있다는 점 또한 styled-compoents의 매력이다!

 

그리고 className 을 확인해보면 sc 로 시작해서 styled-components 가 적용되었음을 나타내면서 임의값으로 생성된 걸 확인 할 수 있다. 즉, local로 범위가 한정된다는 것!!

그리고 li태그 셋의 classsName이 같은 것은 당연히 같은 컴포넌트를 사용했으니까!