[React] Styled-Components theme 객체 속성 prop을 통해 접근

---

프로젝트 진행중 버튼 컴포넌트를 따로 만들어 재사용성을 높이는 중 props을 통해 theme객체에 속성을 유동적으로 바꾸는 방법을 알아내었다.

Button.tsx

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

interface ButtonProps {
  children?: ReactNode;
  font: string;
  color: string;
}

const Button: React.FC<ButtonProps> = ({ children, color, font }) => {
  return (
    <ColoredBtn style={style} $font={font} $color={color}>
      {children}
    </ColoredBtn>
  );
};

const ColoredBtn = styled.button<{
  $font: string;
  $color: string;
  $backgroundColor: string;
}>`
  padding: 10px 30px;
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* font 변경 부분 */
  // 대괄호 표기법을 사용하여 $font prop에 해당하는 속성명에 접근
  font: ${(props) =>
    ({ theme }) =>
      theme.fontSizes[props.$font]};

  /* color 변경 부분 */
  // if문 사용으로 $color prop에 해당 문자열이 들어있는지 판단 각 theme 속성명 구분 대괄호 표기법으로 $color prop에 해당하는 속성명에 접근
  color: ${(props) => {
    if (props.$color.includes("Grey"))
      return ({ theme }) => theme.grey[props.$color];
    else if (props.$color.includes("Orange"))
      return ({ theme }) => theme.mainColor[props.$color];
    else if (props.$color === "black") return "black";
    else return "white";
  }};
`;

export default ColoredButton;

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.