Material UI v5 – TypeScript에서 Typography 변형을 확장하면 “No overload matches this call” 오류가 발생합니다
Material UI v5와 TypeScript를 함께 사용하면, Typography 변형을 확장하려고 할 때 오류가 발생할 수 있습니다. “No overload matches this call”이라는 오류 메시지는 TypeScript가 새로 추가된 변형을 인식하지 못한다는 것을 나타냅니다. 이 블로그 포스트에서는 이 문제를 해결하고 Typography 변형을 성공적으로 확장하는 방법에 대해 알아보겠습니다.
오류 이해하기
이 오류는 Material UI의 TypeScript 정의 파일에 새로 추가된 Typography 변형이 포함되어 있지 않기 때문에 발생합니다. TypeScript는 변형을 “button”, “caption”, “h1” 등과 같은 미리 정의된 옵션 중 하나로 인식하기를 기대합니다. 이를 해결하기 위해 TypeScript 정의를 업데이트하여 사용자 정의 변형을 포함해야 합니다.
TypeScript 정의 업데이트하기
Material UI의 TypeScript 정의를 업데이트하여 사용자 정의 Typography 변형을 포함하려면 선언 병합(declaration merging)을 사용할 수 있습니다. 이를 통해 기존 모듈 선언을 확장하고 사용자 정의 타입이나 인터페이스를 추가할 수 있습니다.
declare module "@mui/material/styles" {
interface TypographyVariants {
h1Bold: React.CSSProperties;
}
interface TypographyVariantsOptions {
h1Bold?: React.CSSProperties;
}
}
declare module "@mui/material/Typography" {
interface TypographyPropsVariantOverrides {
h1Bold: true;
}
}
위의 코드 스니펫에서는 “@mui/material/styles”에 대한 새로운 모듈을 선언하고, TypographyVariants와 TypographyVariantsOptions 인터페이스에 사용자 정의 변형 “h1Bold”를 추가합니다. 또한 “@mui/material/Typography” 모듈의 TypographyPropsVariantOverrides 인터페이스를 업데이트하여 사용자 정의 변형을 포함하도록 합니다.
테마 업데이트하기
다음으로, 테마 구성을 업데이트하여 사용자 정의 변형을 실제 Material UI 구성 요소에 매핑해야 합니다. 이를 위해 테마 객체의 MuiTypography 구성 요소에 variantMapping 속성을 추가하는 방법을 사용할 수 있습니다.
const theme = createTheme({
typography: {
h1Bold: {
fontWeight: 'bold',
},
},
components: {
MuiTypography: {
defaultProps: {
variantMapping: {
h1Bold: "h1",
},
},
},
},
});
업데이트된 테마 구성으로 인해 h1Bold 변형은 이제 Material UI의 “h1” 구성 요소에 매핑됩니다. 이로써 TypeScript가 변형을 인식하고 오류를 해결할 수 있습니다.
사용자 정의 변형 사용하기
Typography 변형을 성공적으로 확장했으므로, 이제 컴포넌트에서 사용자 정의 변형을 사용할 수 있습니다.
<span class="token-tag"><span class="token-punctuation"><</span>Typography</span> variant<span class="token-operator">=</span><span class="token-string">"h1Bold"</span><span class="token-tag"><span class="token-punctuation">></span></span>
I am the App
<span class="token-tag"><span class="token-punctuation"></</span>Typography</span><span class="token-tag"><span class="token-punctuation">></span></span>
위의 코드 스니펫에서는 JSX 코드에서 h1Bold 변형을 사용하는 방법을 볼 수 있습니다. variant 속성을 “h1Bold”로 설정함으로써 사용자 정의 Typography 스타일을 텍스트에 적용할 수 있습니다.
결론
TypeScript 정의와 테마 구성을 업데이트하여 Material UI v5에서 TypeScript와 함께 Typography 변형을 성공적으로 확장할 수 있습니다. 오류 “No overload matches this call”가 해결되고 TypeScript가 사용자 정의 변형을 인식하므로 컴포넌트에서 사용할 수 있습니다. 이러한 지식을 활용하여 다른 변형을 쉽게 확장하고 TypeScript 프로젝트에 맞춤형 Material UI 테마를 생성할 수 있습니다.
이 블로그 포스트가 Material UI v5에서 TypeScript와 함께 Typography 변형을 확장하는 과정에서 오류를 해결하는 데 도움이 되었기를 바랍니다. 즐거운 코딩하세요!
참고 자료 :
같은 카테고리의 다른 글 보기 :
