Antd 版本 ^4.15.2，
less 版本 ^3.0.4，
less-loader 版本 ^4.1.0，

一、Antd定制主题

1. 在 theme.less 中修改

这是一些最常用的通用变量，所有样式变量可以在这里找到。

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色

打开控制台，选择你要修改的样式变量名。

比如这个class类名是 ant-btn-primary，在这里查找 btn-primary相关的样式变量。

找到之后逐一在theme.less中，修改你想要样式。

如果不生效，可尝试第二种方式修改，查找样式变量名的方法一样。写准确的变量名是修改样式成功的第一步。

2. 在 webpack 中修改

a.webpack.config.dev.js

{
    test: /.(less)$/,
    use: ["style-loader", "css-loader", {
        loader: "less-loader",
        options: {
            modifyVars: {
                "primary-color": "#2ba3fd",
                "btn-primary-bg": "linear-gradient(to right, #2d9cfe, #1ecef7)",
                "btn-border-style": "solid",
                 ...
            },
            javascriptEnabled: true,
        }
    }]
},

b.webpack.config.prod.js

{
    test: /.(less)$/,
    use: [MiniCssExtractPlugin.loader, "css-loader", {
        loader: "less-loader",
        options: {
            modifyVars: {
                "primary-color": "#2ba3fd",
                "btn-primary-bg": "linear-gradient(to right, #2d9cfe, #1ecef7)",
                "btn-border-style": "solid",
                 ...
            },
            javascriptEnabled: true
        }
    }]
},

3.在这里没有找到的变量名怎么修改

比如我要修改ant-menu-submenu-title hover 时的样式，关于menu-submenu-title相关的只找到这一个样式名，不是我要改的样式名。

a.引入CSS模块

import React from 'react';
import './style.css';
const Box = () => (
  <div>
    <p> Styling React Components </p>
  </div>
);
export default Box;

b.使用`:global(...)` 来导出全局样式，保证编译后还是原来的名称，以达到样式覆盖的效果。

:global(.ant-menu-light .ant-menu-submenu-title:hover) {
  color: #f1efef !important; // !important增加样式权重 更改全局样式时用
}

webpack 对写的 ant-menu-submenu-title 进行加载，加载完成时 ant-menu-submenu-title已经变了名字，使用 :global 来防止被webpack重命名。

二、侧边导航图标修改

1.引入@ant-design/icons

import { SearchOutlined, CalendarOutlined } from "@ant-design/icons";

antd从 4.0 开始，不再内置 Icon 组件，请使用独立的图标组件包@ant-design/icons。

2.匹配路由名称对应的图标

static getIcon (name) {
    switch (name) {
        case "路名名称1":
            return <SearchOutlined />;
        case "路由名称2":
            return <CalendarOutlined />;
        default:
            break;
    }
}

3.显示路由名称与图标

<Menu>
    <Menu.Item key={path} >
        <span>
            {this.getIcon(name)}
            <span>{name}</span>
        </span>
    </Menu.Item>
</Menu>

三、固定头部导航栏、侧边导航栏

position: "fixed",
top：0，// 固定在头部
left: 0, // 固定在左侧
zIndex: 3, // 堆叠顺序 层级设置高一些 防止被遮挡

固定定位
position	fixed
特性	相对于浏览器窗口定位；top、right、bottom 和 left 属性则决定了该元素的最终位置。
应用场景	固定在页面某个位置

四、含有Antd表格的页面，只显示表格自身的滚动条

图上既有table表格自身的滚动条，页面整体也有滚动条。

<Table
    columns={columns}
    dataSource={data}
    scroll={{
      x: 1300, // 表格滚动区域的宽
      y：800，// 表格滚动区域的高
    }}
 />

设置antd table的scroll属性，指定表格滚动区域的宽、高。

页面其他元素与表格的宽高之和，不超过视口的宽高，就不会出现滚动条。

前端样式修改