MUI styled에서 스타일 프롭스 사용 시 테마 변수 사용 방법 | MUI 스타일 테마 접근방법

// 임포트
import { Stack, Typography, Theme, useTheme } from "@mui/material";


// 렌더링
<CardHeader status={info.status}>


// 스타일드 컴포넌트 타입 정의
type CardHeaderProps = {
  status: "requested" | "approved" | "rejected";
}

// 스타일드 컴포넌트 스타일 정의
const CardHeader = styled(Stack)<CardHeaderProps>`
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: ${({ status, theme }) =>
    (status === "requested" && theme.palette.primary.main) ||
    (status === "approved" && theme.palette.secondary.main) ||
    (status === "rejected" && theme.palette.error.main)};
  padding: 0px 8px;
`;