react中antd组件引入menu组件，typescript报错

Question

在引入antd库中的菜单组件时，我想把menu的mode模式设置为动态的。

import React, { FC, useState } from "react";
import { Menu, Switch, Divider, MenuTheme } from "antd";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
  LinkOutlined,
} from "@ant-design/icons";
import {} from "@ant-design/icons";
import "./App.css";
import { MenuMode } from 'antd/lib/menu';
const { SubMenu } = Menu;

const App: FC = () => {
  const [mode, setMode] = useState<MenuMode>("inline");
  const changeMode = () => {};
  const changeTheme = () => {};
  return (
    <div>
      <Switch onChange={changeMode} /> Change Mode
      <Divider type="vertical" />
      <Switch onChange={changeTheme} /> Change Style
      <br />
      <br />
      <Menu
        style={{ width: 256 }}
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["sub1"]}
        mode={mode}
      >
      </Menu>
    </div>
  );
};

export default App;

但是却报了如下错误，

const [mode, setMode] = useState<MenuMode>("inline");
在这里我已经给mode设置了类型为MenuMode，不知道为什么还会报不能分配类型的错误呢?

Answer 1

import { MenuMode } from "rc-menu/lib/interface";

TLDR：用上面这个MenuMode。

antd 的类型定义里的 MenuMode定义是
export declare type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
但组件要的是rc-menu里的MenuMode，定义为
export declare type MenuMode = 'horizontal' | 'vertical' | 'inline';
所以没法用，感觉这是一个 antd 的问题？