React + Next.js + Ant Design (antd)
浏览器console报错信息:
Warning: Prop `className` did not match. Server: "anticon anticon-user ant-menu-item-icon" Client: "anticon anticon-user -item-icon"
问题分析
导入的方式不同, 不共享上下文
import { Menu } from 'antd';
// 这样导入 会报错这个错误,
import SubMenu from 'antd/lib/menu/SubMenu';
解决方案
直接解构使用,
import { Menu } from 'antd';
// ↓↓↓↓↓↓↓↓
const { SubMenu } = Menu;
// 使用
<SubMenu key='sub1' title='User'>
<Menu.Item key='3'>Tom</Menu.Item>
</SubMenu>
或者是 不解构它,
直接使用Menu.SubMenu
import { Menu } from 'antd';
// 使用
<Menu.SubMenu key='sub1' title='User'>
<Menu.Item key='3'>Tom</Menu.Item>
</Menu.SubMenu>