search

vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
20.08k stars 3.78k forks source link

UI升级为v4版本之后，没有办法自定义某个组件的主题了 #7759

Open shiwanjun1995 opened 1 month ago

shiwanjun1995 commented 1 month ago

Version

4.2.3

Environment

vue3

Reproduction link

https://next.antdv.com/docs/vue/customize-theme-cn

Steps to reproduce

v3:https://3x.antdv.com/docs/vue/customize-theme-cn，是通过找变量文件对应的name，比如我需要修改layout组件的@layout-header-height: 64px;产品嫌它高了，需要变成@layout-header-height: 56px;，然后通过modifyVars的方式进行覆盖； v4:https://next.antdv.com/docs/vue/customize-theme-cn，是通过css-in-js的形式进行修改，比如我需要修改layout组件的高度； <a-config-provider :theme="{ components: { Layout: { '变量名称如何找？':'56px' }, }, }"

Layout

What is expected?

出一个映射表，能够找到对应组件的变量主题名称。尝试着在这个文件目录下：node_modules/ant-design-vue/lib/theme/convertLegacyToken.js，只找到了 300行： // Layout 303行：'layout-header-height': '64px',

What is actually happening?

找不到组件对应的变量名

shiwanjun1995 commented 1 month ago

@tangjinzhou 麻烦大佬出个文档哈～

han1548772930 commented 1 month ago

直接行内样式

shiwanjun1995 commented 1 month ago

直接行内样式 :style="{xxx: '#xxx'}"? 貌似不太优雅，🤣

han1548772930 commented 1 month ago

直接行内样式 :style="{xxx: '#xxx'}"? 貌似不太优雅，🤣

没办法 我之前改layout-footer的padding的时候也不生效 就只能行内样式了