🧐[问题]关于ThemeProvider ts类型问题

[hef98]

🧐 问题描述

💻 示例代码

ThemeProvider: <T = any, S = any>(props: import("..").ThemeProviderProps<T, S>) => import("react").ReactNode
但是它实际上是一个Object,因为我将它当成一个函数调用时 会报错ThemeProvider is not a function

🚑 其他信息

[arvinxx]

有示例代码么

[hef98]

有示例代码么

https://codesandbox.io/p/sandbox/admiring-fire-5y5vl3?file=%2Fnode_modules%2Fantd-style%2Flib%2Ffunctions%2Findex.d.ts%3A16%2C45

injectGlobal: {
    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): void;
    (...args: import("@emotion/serialize").CSSInterpolation[]): void;
}, styleManager: import("../core").Emotion, ThemeProvider: <T = any, S = any>(props: import("..").ThemeProviderProps<T, S>) => import("react").ReactNode, StyleProvider: import("react").FC<import("../factories/createStyleProvider").StyleProviderProps>, useTheme: () => import("..").Theme;

import { useState } from "react";
import { ThemeProvider } from "antd-style"
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  ThemeProvider({
    themeMode:"auto",
    children:["123"]
  })
  return (
    <div className="App">
      
    </div>
  );
}

export default App
```;

![image](https://github.com/ant-design/antd-style/assets/103022158/44f9393f-e922-4ffa-8058-f0d11380728a)

[arvinxx]

你的用法明显是错的…

import { useState } from "react";
import { ThemeProvider } from "antd-style"
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
<ThemeProvider themeMode={'auto'} >
    <div className="App">
      
    </div>
</ThemeProvider>
  );
}

export default App

[hef98]

你的用法明显是错的…

import { useState } from "react";
import { ThemeProvider } from "antd-style"
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
<ThemeProvider themeMode={'auto'} >
    <div className="App">
      
    </div>
</ThemeProvider>
  );
}

export default App

这样使用在vscode 会有一个错误
“ThemeProvider”不能用作 JSX 组件。
其返回类型 "ReactNode" 不是有效的 JSX 元素。
不能将类型“undefined”分配给类型“Element | null”。ts(2786)
因为 ReactNode类型 有可能是undefined

[arvinxx]

你的用法明显是错的…

import { useState } from "react";
import { ThemeProvider } from "antd-style"
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
<ThemeProvider themeMode={'auto'} >
    <div className="App">
      
    </div>
</ThemeProvider>
  );
}

export default App

这样使用在vscode 会有一个错误 “ThemeProvider”不能用作 JSX 组件。 其返回类型 "ReactNode" 不是有效的 JSX 元素。 不能将类型“undefined”分配给类型“Element | null”。ts(2786) 因为 ReactNode类型 有可能是undefined

这个应该是你的 react 版本不对。升级到最新的 @types/react 应该就好了: #63

[hef98]

你的最明显的是错误的...

import { useState } from "react";
import { ThemeProvider } from "antd-style"
import reactLogo from "./assets/react.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
<ThemeProvider themeMode={'auto'} >
    <div className="App">
      
    </div>
</ThemeProvider>
  );
}

export default App

这样在 vscode 中使用会出现一个错误“ThemeProvider”无法初始化 JSX 组件。其返回类型“ReactNode”不是有效的 JSX 元素。不能将类型“undefined”分配给类型“Element | ”。null”。ts(2786) 因为 ReactNode 类型可能是未定义的

这应该是你的react版本不对。升级到最新的@types/react应该就可以了：#63

找到问题了 因为我的typescript版本是4 在@types/react中 package.json

    "typesVersions": {
        "<=5.0": {
            "*": [
                "ts5.0/*"
            ]
        }
    },

这导致了FunctionComponent类型声明有些许差异
非常感谢您的耐心解答!