ant-design / ant-design/pro-components

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

Open
#8,185 3 comments 0 reactions 0 assignees View on GitHub
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',
],
}
```

### 🏞 期望结果

<!--
描述你原本期望看到的结果
-->
&emsp;因为我已经引入了`antd.min.css`,所以默认的样式应该也都有。`@ant-design/pro-form`为什么要再专门创建并添加这些样式呢?
&emsp;期待结果:`@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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.