Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛[BUG]cdn引入pro-form和antd，pro-form插入的样式覆盖了定制的主题色 #8185

Open
lxow456 opened this issue Feb 23, 2024 · 3 comments
Open

🐛[BUG]cdn引入pro-form和antd，pro-form插入的样式覆盖了定制的主题色 #8185

lxow456 opened this issue Feb 23, 2024 · 3 comments

Comments

@lxow456
Copy link

lxow456 commented Feb 23, 2024 •
edited
Loading

🐛 bug 描述

 通过cdn的方式引入antd和@ant-design/pro-form，引入成功后，发现原本定制的主题色，被覆盖成了默认的主题色。
 翻了一下@ant-design/pro-form的源码，发现是它在<head>里插入了很多<style>，包含默认的样式，导致定制的主题色被覆盖。

📷 复现步骤

  1. config.ts
{
  //...other config
  antd: {
    disableBabelPluginImport: true
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    '@ant-design/pro-form': 'ProForm',
    '@ant-design/pro-descriptions': 'ProDescriptions',
    '@ant-design/pro-table': 'ProTable',
    antd: 'antd',
  },
  styles: [
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css',
    'https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/dist/table.min.css',
    'https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/dist/form.min.css',
    'https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/dist/descriptions.min.css',
  ],
  scripts: [
    'https://unpkg.com/[email protected]/umd/react.production.min.js',
    'https://unpkg.com/[email protected]/umd/react-dom.production.min.js',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js',
    'https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/dist/form.js',
    'https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/dist/table.min.js',
    'https://cdn.jsdelivr.net/npm/@ant-design/[email protected]/dist/descriptions.min.js',
  ],
}

🏞 期望结果

 因为我已经引入了antd.min.css，所以默认的样式应该也都有。@ant-design/pro-form为什么要再专门创建并添加这些样式呢？
 期待结果：@ant-design/pro-form不添加这些默认的样式

💻 复现代码

© 版本信息

  • @ant-design/pro-form: 1.64.1
  • antd: 4.23.6
  • umi: 3.5.20
  • 浏览器环境 Chrome 117.0.5938.150
  • 开发环境 [windows]
@lxow456 lxow456 changed the title 🐛[BUG]cdn引入pro-components和antd，pro-components插入的样式覆盖了定制的主题色 🐛[BUG]cdn引入pro-form和antd，pro-form插入的样式覆盖了定制的主题色 Feb 23, 2024
@xiaosen7
Copy link

same problem

@upupj
Copy link

upupj commented May 14, 2024

import { ProForm
} from "@ant-design/pro-components";
proform要这样引入就没有问题

@linvic
Copy link

linvic commented Dec 16, 2024

请问解决了吗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@linvic @lxow456 @xiaosen7 @upupj