Styled Components

리액트에서 CSS를 보다 편리하게 컴포넌트에 적용할 수 있도록 도와주는 패키지이다.

npm install styled-components를 입력하여 설치한다.

package.json 파일의 dependency에 잘 추가가 되었는지 확인한다.

"dependencies": {
    "react": "^버전",
    "react-dom": "^버전",
    "react-scripts": "버전",
    "styled-components": "^버전",
}

만약 추가가 되어있지 않다면 npm install --save styled-components를 입력하여 설치한다.

사용법

스타일 설정

styled.태그명으로 기존 HTML 태그안의 스타일 속성을 정의할 수 있다.

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
    padding: 8px 16px;
    font-size: 16px;
    border-width: 1px;
    border-radius: 8px;
    cursor: pointer;
`;

function Button(props) {
    const {title, onClick} = props;

    return <StyledButton onClick={onClick}>{title || "button"}</StyledButton>;
}

export default Button; 

위의 코드에서는 styled.button`스타일 값1; 스타일 값2;` 이런식으로 정의 하였다.

이렇게 생성한 것은 하나의 리액트 컴포넌트이며 아래의 return에서 StyledButton 컴포넌트를 반환할 수 있다.

props 가져오기

const StyledButton =  styled.button`
  	background-color: ${(props) => props.color};
    padding: 8px 16px;
    font-size: 16px;
    border-width: 1px;
    border-radius: 8px;
    cursor: pointer;
`;

const App = () => {
  return (
    <>
      <StyledButton color={"#ffffff"} />
      <StyledButton color={"#111111"} />
    </>
  );
};

Styled Component에서 props를 전달하여 색깔을 변경시킬수도 있다.

as로 태그 변경하기

위의 예제는 button을 꾸민것이지만, 저 디자인을 그대로 div태그에 쓰고 싶을 땐 as 속성을 사용한다.

<StyledButton as="div" coor={"#574b90"}> ... </StyledButton>

이렇게 되면 디자인은 StyledButton과 동일하지만, 실제로는 HTML의 div 태그가 생성된다.