[react] Styled-components

css in js

스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법

Styled Components 는 CSS-in-JS 라이브러리 중에서도 널리 사용되는 라이브러리이다.

써보자.

패키지 설치

 npm i styled-components

기본 문법

import styled from "styled-components";

styled.button`
  // <button> HTML 엘리먼트에 대한 스타일 정의
	font-size: 1rem;
`;

기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤 것을 스타일링 하느냐에 따라 달라진다.

HTML 엘리먼트

모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에 해당 태그명의 속성에 접근한다.

import styled from "styled-components";

styled.button`
  // <button> HTML 엘리먼트에 대한 스타일 정의
`;

React 컴포넌트

해당 컴포넌트를 임포트 후 인자로 해당 컴포넌트를 넘긴다.

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
  // <Button> React 컴포넌트에 스타일 정의
`;

예시

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
`;

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

와 같은 버튼 컴포넌트를 다른 React 컴포넌트에서 사용함.

import Button from "./Button";
<Button>Default Button</Button>;

가변 스타일링

Styled Components는 Tagged Template Literals을 사용해 React 컴포넌트에 넘어온 props에 따라 다른 스타일을 적용하는 기능을 제공한다.

예시 1

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  );
}

자바스크립트의 || 연산자를 사용하여 props이 넘어오지 않은 경우, 기존에 정의한 기본 색상이 그대로 유지되도록 하는 컴포넌트이다.

import Button from "./Button";
<Button color="green" background="pink">
  Green Button
</Button>;

핑크 배경에 초록 글자를 갖도록 스타일된 버튼이 나타난다.

예시 2

보통 prop에 따라 바꾸고 싶은 CSS 속성이 위와 같이 하나가 아니라 여러 개일 경우 사용하는데, css 함수를 이용해 여러 개의 css 속성을 묶어서 정의할 수 있따.

import React from "react";
import styled, { css } from "styled-components";

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  ${(props) =>
    props.primary &&
    css`
      color: white;
      background: navy;
      border-color: navy;
    `}
`;

function Button({ children, ...props }) {
  return <StyledButton {...props}>{children}</StyledButton>;
}

자바스크립트의 && 연산자를 사용해서, primary prop이 존재하는 경우에만 css로 정의된 스타일이 적용되도록 한 컴포넌트다.

import Button from "./Button";
<Button primary>Primary Button</Button>;

이러면 남색 배경에 흰 글자를 갖도록 스타일된 버튼이 나타난다.

굿.

출처 : https://www.daleseo.com/react-styled-components/