pro-components
pro-components copied to clipboard
Published
20 hours ago •
ant-design
ant-design
🐛[BUG]cdn引入pro-form和antd，pro-form插入的样式覆盖了定制的主题色
🐛 bug 描述
通过cdn的方式引入antd和@ant-design/pro-form，引入成功后，发现原本定制的主题色，被覆盖成了默认的主题色。
翻了一下@ant-design/pro-form的源码，发现是它在<head>里插入了很多<style>，包含默认的样式，导致定制的主题色被覆盖。
📷 复现步骤
- 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]
