CSS property value 간단히 적용하기

디자인 시스템 컴포넌트를 만드는 경우 혹은 커스텀 컴포넌트를 만들어 사용하는 경우에
css property를 props로 전달하는 경우가 있다.

이 때 해당 css property에서 지원하는 값들을 일일히 type 지정해주고는 하는데

CASE1. 기본 속성값을 지정해주는 경우
export interface ComponentProps {
  ...
  maxHeight?: "inherit" | "auto"  | "max-content"  | "min-content" | (...) ;
}

CASE2. string. number응 Data type으로 지정해주는 경우
export interface ComponentProps {
  ...
  maxHeight?: string | number;
}

이 때 property type을 간단히 지정해 줄 수 있는 패키지가 있다.

import * as CSS from 'csstype';

export interface TextBoxProps {
  ...
  maxHeight?: CSS.MaxHeightProperty<string>;
}