Javascript React-Typescript:属性“body”不存在类型“DefaultTheme”

我对React和Typescript是新手，我正在尝试将黑暗模式添加到我的项目中， 我创建了globalStyle组件、主题组件，并使用Themeprovider

我在globalStyle组件上遇到一个问题，它说： 属性“body”不存在类型“DefaultTheme”

我的globalStyles.tsx代码如下：

import { createGlobalStyle} from "styled-components"
export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }`

my Themes.tsx：

export const lightTheme = {
    body: '#FFF',
    text: '#363537',
    background: '#363537',
}
export const darkTheme = {
    body: '#363537',
    text: '#FAFAFA',
    background: '#999',
}

以及App.tsx上的my Themeprovider代码：

<ThemeProvider theme={this.state.theme === 'light' ? lightTheme : darkTheme}>
        <>
        <GlobalStyles/>
            <ul className='tickets'>
                {filteredTickets.map((ticket) => (
                <li key={ticket.id} className={ticket.toggle ? 'expand' : 'ticket'}>
                    <h5 className='title'>{ticket.title}</h5>
                    <button onClick={() => this.onHide(ticket.id)}>Hide</button>
                    <p className={ticket.toggle ? 'show-more' : 'content'}>{ticket.content}</p>
                    <button onClick={()=> this.onToggle(ticket.id)}>{ticket.toggle ? 'Show less' : 'Show more'}</button>
                    <footer>
                        <div className='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
                    </footer>
                </li>))}
            </ul>
        </>
        </ThemeProvider>

我做错了什么？为什么在globalStyles.tsx上无法识别theme.body和theme.text

---

谢谢

我的回答基于以下链接：

createGlobalStyle可以接受主题的形状：

createGlobalStyle<{theme: ThemeType}>

---

因此，我建议您为主题设置一个界面，如上所述，然后将其传递到createGlobalStyle中，以代替主题类型。我的回答基于以下链接：

createGlobalStyle可以接受主题的形状：

createGlobalStyle<{theme: ThemeType}>

因此，我建议您为您的主题设置一个界面，如上所述，然后将其传递到createGlobalStyle中以代替主题类型