ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

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

Open shiwanjun1995 opened this issue 1 year ago • 4 comments
trafficstars

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

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 avatar Jul 29 '24 12:07 shiwanjun1995

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

shiwanjun1995 avatar Jul 29 '24 12:07 shiwanjun1995

直接行内样式

han1548772930 avatar Jul 30 '24 05:07 han1548772930

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

shiwanjun1995 avatar Jul 30 '24 07:07 shiwanjun1995

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

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

han1548772930 avatar Jul 31 '24 00:07 han1548772930

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

github-actions[bot] avatar Sep 29 '24 02:09 github-actions[bot]

@tangjinzhou 机器人为啥自动给我这个 issue 给关闭了啊~大佬

shiwanjun1995 avatar Mar 03 '25 10:03 shiwanjun1995