설치

$ npm i styled-components *// JavaScript 라이브러리*
$ npm i @types/styled-components *// TypeScript 라이브러리 (위 아래 둘 다 설치)*

기본 사용방법

import styled from 'styled-components';

const Boxes = styled.div`
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #38423C;
`;

<Boxes></Boxes>

props를 통해 property에 값 할당 ( JavaScript & TypeScript ) - 1

*// in JavaScript*

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.bgColor};
  // props 값 상호작용 가능 (변수 바인딩을 위해 Arrow function 사용)
`;

<Box bgColor="tomato"></Box>

// in TypeScript

const Box = styled.div<{boColor: string}>`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.bgColor};
`;

<Box bgColor="tomato"></Box>

Callback 함수로 선언하여 매개변수에 props를 포함 시켜서 property에 할당한다.

Scss의 @extend와 비슷한 기능 - 2

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: black;
`;

const Circle = styled(Box)`
  border-radius: 50%;
  background-color: white; // 속성 오바라이딩 됨
`;

Box에 선언된 property 를 그대로 가져와서 사용이 가능한 방법입니다.

태그 요소를 변경하는 ‘트릭’ - 3

const Btn = styled.button`
  width: 50px;
  height: 20px;
  background-color: tomato;
  border: none;
  border-radius: 4px;
`;

<Btn as="a"></Btn>

다음과 같이 해당 컴포넌트 요소에 as 속성을 사용하면, 기존에 <button> 태그를 지정된 <a> 태그로 변경할 수 있다.

태그 요소의 속성을 섹시하게 변경하는 ‘트릭’ - 4

const Input = styled.input.attrs({ required: true })`
  width: 100px;
  height: 20px;
  background-color: skyblue;
`;

attrs() 함수를 사용하여 해당 컴포넌트의 속성을 변경할 수 있다.

애니메이션 keyframe 만들기 - 5

import { keyframes } from 'styled-components';

const animationSetting = keyframes`
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(365deg);
  }
`;

const AniBox = styled.div`
  width: 100px;
  height: 100px;
  background-color: white;
  animation: ${animationSetting} 5s linear infinite;
`;

Scss와 비슷한 방식의 후손 선택자 선언방식 - 6

const Emoji = styled.a`
  font-size: 20px;
`;

const Boxs = styled.div`
  width: 100px;
  height: 100px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  // 해당 컴포넌트 자손으로 존재하는 태그 중, styled-components 가 아닌 일반 선택자 선언방식
  span {
    font-size: 20px;

    &:hover {
      font-size: 30px;
    }

    &:active {
      opacity: 0;
    }
  }
  
  // 해당 컴포넌트 자손으로 존재하는 태그 중, styled-components 인 선택자 선언방식
  ${Emoji} {

    &:hover {
      font-size: 30px;
    }

    &:active {
      opacity: 0.5;
    }
  }
`;

<Boxs>
  <span>🙂</span>
  <Emoji>🔥</Emoji>
</Boxs>

후손 선택자의 장점

→ target(부모태그) 의 자손인 경우에만 새롭게 선언된 속성이 적용되고, 밖의 기존 Emoji의 속성은 그대로 이다.

컴포넌트 태그로 후손선택자 선언 시 장점

→ 태그의 요소가 span 에서 a 바뀌어도 상관없이 동작한다. (태그요소에 자유롭다.)