vite-react修改antd得prefix

项目介绍

使用vite-react-ts和less，修改prefix作用主要就是乾坤项目antd版本不同导致样式冲突

安装

pnpm add antd
pnpm add less -D
1
2

配置vite.config.ts中css.preprocessorOptions.less.modifyVars

import { defineConfig, loadEnv } from 'vite'
export default ({ mode }) => {
	css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            'ant-prefix': 'my-prefix',// ant-prefix是antd库中less样式文件定义的动态前缀，@antd-prefix:'ant';
          },
          // 支持内联 JavaScript
          javascriptEnabled: true,
        },
        module: true,
      },
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在main.tsx中引入antd的less样式文件，同时配置ConfigProvider 的 prefixCls，prefixCls值需要和vite.config.ts文件配置的ant-prefix的值相同

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import 'antd/dist/antd.less'
import { ConfigProvider, message, notification } from 'antd'

// 脱离文档流的组件修改 主要是 message、notification、Modal,message和notification比较特殊，有独特的后缀
message.config({
  prefixCls: 'my-prefix-message',
})

notification.config({
  prefixCls: 'my-prefix-notification',
})

// 配置Modal
ConfigProvider.config({
  prefixCls: 'my-prefix',
})


ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ConfigProvider prefixCls="my-prefix">
       <App />
    </ConfigProvider>
  </React.StrictMode>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

以上部分可以修改默认引入的antd样式文件的前缀，如果手动修改antd组件的样式，需要将 ant（ant是antd-prefix默认值） 改成 自定义前缀（例如：my-prefix）,如果使用动态参数antd-prefix就会自动替换（建议使用动态参数）例：

没有使用动态参数，需要将ant 改成 ant-prefix
// 修改前
.ant-tabs{}
// 修改后
.my-prefix-tabs{}

使用动态参数会自动替换
// 动态参数
.@{ant-prefix}-tabs{}
1
2
3
4
5
6
7
8
9