Closed
Description
🐛 bug 描述
目前我是在用微前端来重构新项目,老项目里用了 ant-design-vue,而新项目里用 React 的 ant-design,因为这两者样式冲突,所以希望在新项目里使用 prefixCls 修改类名前缀。
const renderApp = (props: any) => {
const { container } = props;
ReactDOM.render(
<ConfigProvider locale={zhCN} prefixCls='cmsAnt'>
<App />
</ConfigProvider>,
container ? container.querySelector('#root') : document.querySelector('#root'),
);
};
然后在 main.ts 里我使用 index.less
尝试修改 @ant-prefix
:
@ant-prefix: cmsAnt;
目前发现是 HTML 里确实改成了 .cmsAnt-xxxx
的类名了,对于普通的 ant-design 组件都是正常的,但是对于 ant-design-pro 的组件还是没有生效。
📷 复现步骤
以上
🏞 期望结果
期望是修改变量后,无论 ant-design 和 ant-design-pro 都生效。
💻 复现代码
以上
© 版本信息
- Ant Design Pro 版本: pro-table: 2.59.2
- 浏览器环境: Chrome
- 开发环境 [e.g. mac OS]
🚑 其他信息
后来我尝试了一下使用 webpack 去修改 @ant-prefix
变量,然后就成功了!不知道这算不算是 ant-design-pro 不支持 ant-design 使用 @ant-prefix
前缀的问题。
以下是 Webpack 配置:
var webpackConfig = {
...
options: {
lessOptions: {
modifyVars: {
'ant-prefix' : 'cmsAnt'
},
sourceMap: true,
javascriptEnabled: true,
}
}
}
...
}
Activity
haixiangyan commentedon Dec 15, 2021
后来我尝试了一下使用 webpack 去修改
@ant-prefix
变量,然后就成功了!不知道这算不算是 ant-design-pro 不支持 ant-design 使用@ant-prefix
前缀的问题。以下是 Webpack 配置:
具体配置可以参考:主题定制
chenshuai2144 commentedon Dec 17, 2021
configProvide 和 修改less 变量 这两个要一起使用的。
ant-design-pro 组件库已经不维护好久了,使用的时候要小心
haixiangyan commentedon Dec 17, 2021
在 App.tsx 里添加
prefixCls
,然后也在 main.ts 里修改@ant-prefix
应该算一起使用吧 🧐。问题的关键是 ant-design 是成功的,但是 ant-design-pro 不成功,有点奇怪,按理说应该一起改。chenshuai2144 commentedon Dec 17, 2021
古老项目,没兼容
mjj7890 commentedon Apr 22, 2022
我也遇到了此问题,请问大佬,有解决方案嘛