React 17 - 添加 Evergreen UI 窗格会导致错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

使用 Evergreen UI 中的 Pane 在 React 17 中出现错误 我从 evergreen-ui 导入了窗格，并在我的 react js 应用程序中使用它给了我错误。

以下是我的代码

import React from "react";
import {Pane} from 'evergreen-ui';

function App() {
 return (
      <div>
        <Pane
         elevation={2}
         float="left"
         width={200}
         height={120}
         margin={24}
         display="flex"
         justifyContent="center"
         alignItems="center"
         flexDirection="column"
         >
          <h3>Elevation 2</h3>
          <p>Popovers and Dropdowns</p>
         </Pane>
      </div>
    );
}

export default App;

Answer 1

尝试编辑useTheme.js

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext'

function useTheme() {
  const theme = useContext(ThemeContext );
  
  return (
    <div style={{ color: theme.color}}>Foo Bar</div>
  );
}

export default useTheme;