Skip to content

🐛[问题] ant-design 改了 prefixCls 后 ant-design-pro 不生效 #9426

Closed
@haixiangyan

Description

@haixiangyan

🐛 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

haixiangyan commented on Dec 15, 2021

@haixiangyan
Author

后来我尝试了一下使用 webpack 去修改 @ant-prefix 变量,然后就成功了!不知道这算不算是 ant-design-pro 不支持 ant-design 使用 @ant-prefix 前缀的问题。

以下是 Webpack 配置:

var webpackConfig = {
   ...
    options: {
            lessOptions: {
              modifyVars: {
                'ant-prefix' : 'cmsAnt'
              },
              sourceMap: true,
              javascriptEnabled: true,
            }
          }
    }
   ...
}

具体配置可以参考:主题定制

chenshuai2144

chenshuai2144 commented on Dec 17, 2021

@chenshuai2144
Collaborator

configProvide 和 修改less 变量 这两个要一起使用的。

ant-design-pro 组件库已经不维护好久了,使用的时候要小心

haixiangyan

haixiangyan commented on Dec 17, 2021

@haixiangyan
Author

在 App.tsx 里添加 prefixCls,然后也在 main.ts 里修改 @ant-prefix 应该算一起使用吧 🧐。问题的关键是 ant-design 是成功的,但是 ant-design-pro 不成功,有点奇怪,按理说应该一起改。

chenshuai2144

chenshuai2144 commented on Dec 17, 2021

@chenshuai2144
Collaborator

古老项目,没兼容

mjj7890

mjj7890 commented on Apr 22, 2022

@mjj7890

在 App.tsx 里添加 prefixCls,然后也在 main.ts 里修改 @ant-prefix 应该算一起使用吧 🧐。问题的关键是 ant-design 是成功的,但是 ant-design-pro 不成功,有点奇怪,按理说应该一起改。

我也遇到了此问题,请问大佬,有解决方案嘛

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @chenshuai2144@haixiangyan@mjj7890

        Issue actions

          🐛[问题] ant-design 改了 prefixCls 后 ant-design-pro 不生效 · Issue #9426 · ant-design/ant-design-pro