reactjs - React ve Typescript ile emotion/styled nasıl kullanılır

Kök bileşenimi @emotion/react'ten ThemeProvider ile sarmaladım, bu da bana props.theme'e şu şekilde erişim sağlıyor:

const StyledDiv = styled.div`
  background-color: ${(props) => props.theme.palette.primary.main};
`;

Problem: props.theme, TS’ye göre boş bir nesnedir - palette Theme türünde mevcut değil (ancak tema sağlayıcısına gönderdiğim nesne bu özelliği içeriyor). Eğer TS bunu görmezden gelirse, kod çalışıyor.

Belgeler bunu kapsıyor ve kolay bir çözüm gibi görünüyor: Emotion tema türünü genişletin

Ancak, props.theme'in Theme türünün doğru özniteliklere sahip olması için belgeleri yeterince iyi anlamıyorum.

Beni doğru yönde yönlendiren her türlü yardım çok takdir edilir!

Cevap #1

Bu dosyayı ekleyin types.d.ts

import "@emotion/react";
import { IPalette } from "../your-palette";

declare module "@emotion/react" {
  export interface Theme extends IPalette {}
}