React Next.js Ant Design antd 报错: Warning: Prop `className` did not match. Server:....

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>

Github

https://github.com/xxxxue/nextjs-antd-demo