项目介绍

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

安装

pnpm add antd
pnpm add less -D

配置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';},// 支持内联 JavaScriptjavascriptEnabled: true,},module: true,},},
})

在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>
);

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

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