search

ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.12k stars 1.32k forks source link

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

Open lxow456 opened 4 months ago

lxow456 commented 4 months ago

🐛 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/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不添加这些默认的样式

💻 复现代码

© 版本信息

xiaosen7 commented 4 months ago

same problem

upupj commented 1 month ago

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