ant-design / ant-design/pro-components
🐛[BUG]cdn引入pro-form和antd,pro-form插入的样式覆盖了定制的主题色
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
通过cdn的方式引入`antd`和`@ant-design/pro-form`,引入成功后,发现原本定制的主题色,被覆盖成了默认的主题色。
翻了一下`@ant-design/pro-form`的源码,发现是它在``里插入了很多``,包含默认的样式,导致定制的主题色被覆盖。
### 📷 复现步骤
<!--
清晰描述复现步骤,让别人也能看到问题,如果可能,尽量提供可执行代码,
如:https://codesandbox.io/ 在此处创建一个 codesandbox,方便我们更快的排查和复现问题
-->
1. config.ts
```javascript
{
//...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/antd@4.23.6/dist/antd.min.css',
'https://cdn.jsdelivr.net/npm/@ant-design/pro-table@2.59.10/dist/table.min.css',
'https://cdn.jsdelivr.net/npm/@ant-design/pro-form@1.64.1/dist/form.min.css',
'https://cdn.jsdelivr.net/npm/@ant-design/pro-descriptions@1.10.74/dist/descriptions.min.css',
],
scripts: [
'https://unpkg.com/react@16.14.0/umd/react.production.min.js',
'https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js',
'https://cdn.jsdelivr.net/npm/antd@4.23.6/dist/antd.min.js',
'https://cdn.jsdelivr.net/npm/@ant-design/pro-form@1.64.1/dist/form.js',
'https://cdn.jsdelivr.net/npm/@ant-design/pro-table@2.59.10/dist/table.min.js',
'https://cdn.jsdelivr.net/npm/@ant-design/pro-descriptions@1.10.74/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]
Contributor guide
Research direction
Start with the config.ts CDN setup and the listed @ant-design/pro-form 1.64.1 and antd 4.23.6 assets, then reproduce the issue in Chrome using the provided external scripts and styles. Inspect the style elements added to the document head; done means the custom theme is not overridden by unwanted Pro Form default styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100