vite项目处理antd5.0版本低版本浏览器(低于chrome87)兼容
antd5.0引入了:where新特性，但是官网直言，该特性兼容性并不好，仅chrome88以上版本浏览器才支持。 为了解决这问题，需要使用 StyleProvider 降级处理。
import { StyleProvider } from '@ant-design/cssinjs';
// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
export default () => (
<StyleProvider hashPriority="high">
<MyApp />
</StyleProvider>
);
但是关闭 :where 降权后，需要手动调整一些样式的优先级。
原本where优先级为0，很容易被自己设置的自定义样式覆盖。但是降权后where消失，取而代之的是.class选择器。这就导致原本设置自定义样式优先级可能被antd的默认样式覆盖。 例如：
所以下一步需要给自定义样式加权。
官网中也有介绍。
但是问题来了，官网给出的三个插件使用起来并不友善。 前两个需要手动选定css文件，通过fs读取后，经过postcss编译生成新的文件。这对于工程化的项目而言简直不可理喻。
至于第三个，经过测试后效果也不佳，npmjs周下载量甚至不到5k
所以最终选择postcss-prefix-[selector](postcss-prefix-selector - npm) 周下载量48w，已经足以说明它的优秀。
以上准备完毕后，开始正式配置。
1：配置main.ts
import {
StyleProvider
} from '@ant-design/cssinjs';
createRoot(document.getElementById('root')!).render(
<StyleProvider hashPriority="high">
<App />
</StyleProvider>
)
2：配置vite.config.ts
...
css: {
postcss:{
plugins:[
prefixPlugin({
prefix: '#root',
includeFiles: ['需要处理的文件，正则或字符串'],
ignoreFiles:['忽略的文件']
})
]
}
}
...
至此，如果你的项目中没有用到.module.less等模块化样式，antd降权已经完成。
但是如果存在.module.less等模块化样式，还需要其他配置。否则所有module.less样式会丢失。
3：处理.module.less模块化样式
这一步也简单，代码如下：
...
css: {
modules:{
scopeBehaviour: 'global',//开启全局空间
exportGlobals: true,//导出全局
},
postcss:{
plugins:[
prefixPlugin({
prefix: '#outRoot',
includeFiles: [/xxx/],
ignoreFiles:['xxx']
})
]
}
},
...
至此，如果你的module.less文件中没有:export等信息，antd降权完成。但是如果存在，需要进一步处理，postcss不识别:export语法，会导致其全部丢失。
需要把其归纳在一个文件中然后利用ingoreFiles忽略转化。
4：vite版本要求
使用以上方法，vite版本必须5.0以上！ 使用以上方法，vite版本必须5.0以上！ 使用以上方法，vite版本必须5.0以上！
完成后表现如下
所有经过处理的自定义样式会添加#root前缀，从而实现加权。而未经处理的样式体现为antd样式为.where.class的双class选择器。
至此antd5.x降权完成
