React typescript ：属性“body”不存在类型“DefaultTheme”

zfciruhq 于 2023-01-21 发布在 TypeScript

关注(0)|答案(3)|浏览(195)

我是新的React和 typescript ，我试图添加黑暗模式到我的项目，我创建了全局样式组件，主题组件和使用主题提供者。
我的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;
  }`

我的主题. tsx：

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

以及App.tsx上的主题提供程序代码：

<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？
谢谢!

typescript

来源：https://stackoverflow.com/questions/66483948/react-typescript-property-body-does-not-exist-type-defaulttheme

3条答案

按热度按时间

kb5ga3dv1#

我的答案基于以下链接：https://spectrum.chat/styled-components/general/i-cant-use-my-theme-in-createglobalstyle-function-styled-components-v4-react-v16-6-3~0978b404-ab71-45c9-8f75-0862abde4eb5
createGlobalStyle可以接受主题的形状：

createGlobalStyle<{theme: ThemeType}>

在styled-components文档中，有这样的内容（https：//styled-components.com/docs/api#typescript）：

declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

因此，我建议您为主题设置一个接口，如上所述，然后将其传递到createGlobalStyle中以代替ThemeType

赞(0）回复(0）举报 2023-01-21

b09cbbtk2#

因此，上面的答案失败，因为useTheme不知道您传递给createGlobalStyles的是什么类型。
但这是一个不需要使用ts-ginore的打印脚本解决方案：
1.正如jnpdx所建议的，您确实需要键入createGlobalTheme对象：
createGlobalStyle<{theme: ThemeType}>
1.到目前为止，我找到的唯一可行的解决方案是像这样在后面输入useTheme变量：
const theme = useTheme() as ThemeType;

赞(0）回复(0）举报 2023-01-21

o0lyfsai3#

基于styled-components文档（https：//styled-components.com/docs/api#typescript），我为主体类型创建了一个接口：

export interface DefaultTheme {
  body: string;
}

export const GlobalStyle = createGlobalStyle<{ theme: DefaultTheme }>`

body{
  background-color: ${({ theme }) => theme.body};
  color: var(--font-color);
}

`;

这对我很有效。

赞(0）回复(0）举报 2023-01-21

我来回答

React typescript ：属性“body”不存在类型“DefaultTheme”

3条答案

相关问题

热门标签

最新问答