React에서 CSSProperties 확장하고 ‘Type ‘{ color’ 해결하는 방법

React 프로젝트에서 CSSProperties 확장하는 방법

만약 TypeScript에 새로워서 React 컴포넌트에서 인라인 스타일을 사용할 때, “Type ‘{ color: string; fontSize: string; fontWeight: number; }’ is not assignable to type ‘CSSProperties’.”와 같은 경고 메시지를 만나게 되면, 이 문제 해결 가이드가 도움이 될 수 있습니다.

에러 메시지 이해하기

TypeScript는 "flex"와 "column"과 같은 CSS 속성에 특정 타입을 예상합니다. 하지만, 기본적으로 이러한 속성들은 더 일반적이고 구체적이지 않은 string 타입을 받습니다. 이로 인해 타입 불일치 에러가 발생합니다.

다음은 비슷한 에러의 예시입니다:

const value: string = "flex";
const a: "a" = value; // 에러, `string`은 더 구체적인 `"a"`에 할당될 수 없습니다.

해결 방법 1: as const 사용하기

더 우아한 해결 방법은 인라인 스타일에 as const를 사용하는 것입니다. 이 방법은 객체의 값을 해당하는 리터럴 타입으로 취급합니다. TypeScript 버전을 업데이트하여 이 기능을 사용할 수 있다는 것을 확인해주세요.

const styles = {
    promAlert: {
      display: 'flex',
      flexDirection: 'column',
    },
} as const;

해결 방법 2: 스타일 타입 명시적으로 정의하기

다른 방법으로는 React.CSSProperties 인터페이스를 사용하여 스타일의 타입을 명시적으로 정의하는 것입니다. 이를 통해 각 속성에 대한 자동 완성 기능을 제공하고 타입 체크를 보장할 수 있습니다.

const promptAlert: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column'
}

const styles = {
  promptAlert,
}

해결 방법 3: 값 리터럴과 타입 어설션 사용하기

이 문제를 해결하는 또 다른 방법은 값 리터럴과 타입 어설션을 사용하는 것입니다. 이 방법은 TypeScript에 값이 리터럴임을 알리고 그에 맞게 처리하도록 합니다.

const styles = {
  promAlert: {
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column'
  }
};

결론

위에서 언급한 해결 방법 중 하나를 적용함으로써, Type '{ color: string; fontSize: string; fontWeight: number; }' is not assignable to type 'CSSProperties' 경고 메시지를 없앨 수 있고, React 컴포넌트에서 예상된 타입과 호환되는 인라인 스타일을 사용할 수 있습니다.

특정 상황과 코드베이스에 가장 적합한 해결 방법을 선택해 주세요.

참고 자료 : 

reactjs