Ant Design v4侧边栏布局官方示例本地运行效果不符问题咨询

1. 未全局导入Ant Design的样式文件 #

Ant Design v4的所有组件样式都依赖全局样式包，未引入的情况下组件内置样式无法生效，是你项目出现布局、配色和官方示例不一致的核心原因。
解决方法：在项目入口文件（通常为index.js/App.js）的顶部添加以下导入语句：

import 'antd/dist/antd.css';

如果你的项目用的是less定制主题，改为导入antd/dist/antd.less即可。

2. site-layout类缺少对应样式 #

官方示例中给右侧Layout绑定的site-layout类有配套的背景样式配置：

.site-layout {
  background: #fff;
}

你未添加该自定义样式，导致右侧布局背景和默认页面背景重合，和官方效果有差异。

3. 组件引入方式不规范 #

你从antd/lib的深层路径单独引入子组件，可能出现样式关联异常，推荐直接从antd顶层解构组件更稳妥，修正引入代码如下：

// 删除原来的单独引入语句，替换为以下写法
import { Layout, Menu, Space } from "antd";
const { Header, Content, Footer, Sider } = Layout;

4. Header缺少背景样式配置 #

官方示例中Header设置了白色背景，你的Header没有设置背景色，会继承父级背景，和官方效果不一致，给Header的行内样式添加background: '#fff'即可修复：

<Header style={{ padding: 5, background: '#fff' }}>
  Header
</Header>

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