使用Antd搭配TailwindCSS时触发useContext错误问题咨询

问题描述 #

使用Ant Design结合TailwindCSS开发，代码中未手动使用useContext钩子，但程序触发了useContext() is called outside of a provider component错误。Navbar组件代码如下：

import { UserOutlined } from "@ant-design/icons";
const Navbar = () => {
  return(
    <div className=" w-screen h-10 bg-lime-300 flex fixed items-center justify-end">
      <div className="flex mr-8 ">
        <UserOutlined />
      </div>
    </div>
  );
};

问题原因 #

Ant Design的图标组件（如UserOutlined）内部依赖Antd的全局上下文（Context）实现功能，必须在ConfigProvider组件的包裹范围内才能正常工作。你的应用根组件未用ConfigProvider包裹，导致组件内部的useContext调用无法找到对应的Provider，从而触发错误。

解决方案 #

在应用的根组件中导入并使用ConfigProvider包裹所有应用内容：

import { ConfigProvider } from 'antd';
import Navbar from './Navbar';

function App() {
  return (
    <ConfigProvider>
      <Navbar />
      {/* 其他应用组件 */}
    </ConfigProvider>
  );
}

export default App;

完成上述修改后，Antd内部的上下文就能被正确访问，错误即可解决。

内容的提问来源于stack exchange，提问作者Heron