[스타일드 컴포넌트] css함수를 이용한 가변 스타일링

props와 css함수

---

css로는 2개의 class로 상황에 따라 다른 class를 적용시켜 다른 css효과를 줄 수 있었다.

하지만 스타일드 컴포넌트는 class명을 작성하는 것이 불가능 하기 때문에, props를 이용해 상황에 따라 다른 css속성을 줘야한다.

// props
const MyProfileAccountTabWrap = styled.button`
  background-color: ${({menuTab}) =>
    menuTab === "account" ? blue : #f2f4f6;
  color: ${({menuTab}) =>
    menuTab === "account"
      ? blue
      : black;

  &:hover {
    background-color: ${({menuTab}) =>
      menuTab === "account"
        ? skyblue
        : darkgray;
  }
`;

props를 통해 변경할 css속성이 적다면 props를 이용해도 괜찮지만, 위의 코드처럼 변경할 css속성이 많다면 스타일드 컴포넌트에서 제공하는 css함수를 이용해 아래처럼 깔끔한 코드를 만들어 볼 수 있다.

코드가 획기적으로 줄어드는 것은 아니지만 가독성 측면에서는 굉장히 좋다고 생각한다.

// css함수, props
import styled, { css } from "styled-components";

const MyProfileAccountTabWrap = styled.button`
  background-color: #f2f4f6;
  color: black;
  &:hover {
    background-color: darkgray;
  }
  ${({ menuTab }) =>
    menuTab === "account" &&
    css`
      background-color: blue;
      color: blue;
      &:hover {
        background-color: skyblue;
      }
    `}
`;