ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.61k stars 2.39k forks source link

修复打包导致的 `ImageUploader` 中 `Space` 和 `Grid` 样式的权重问题以及css变量作用域导致的 `--gap-horizontal` 和 `--gap-vertical` 变量未正常生效的问题 #6440

Open cadleo opened 9 months ago

cadleo commented 9 months ago
  1. 使用antd-mobile的项目在打包时,由于分包的原因,会导致如下问题,故需要修改样式权重: 1700485463248

  2. css变量未正常生效问题的详细案例在这里,直接看案例即可,如下为搬运自案例中的结论:

当前 ImageUploader组件设置 --gap-horizontal--gap-vertical 变量的方式存在bug,ImageUploader 中的 Space 组件向上寻找这两个变量时,如果发现当前组件的根元素未声明这两个变量,并不会认为这两个变量不存在,而是继续向祖先元素进行查找。 在发现祖先元素声明过这两个变量后,就会使用祖先元素声明的css变量值作为当前组件css变量的值,这导致 ImageUploader组件声明的如下css变量的默认值无法生效:

---gap-horizontal: var(--gap-horizontal, var(--gap));
---gap-vertical: var(--gap-vertical, var(--gap));

由于 --gap-horizontal--gap-vertical 都已经被祖先元素声明过,所以 var(--gap) 不会生效

codecov[bot] commented 9 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (671ea15) 92.10% compared to head (3a671db) 92.10%.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #6440 +/- ## ======================================= Coverage 92.10% 92.10% ======================================= Files 316 316 Lines 6861 6861 Branches 1719 1719 ======================================= Hits 6319 6319 Misses 504 504 Partials 38 38 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

github-actions[bot] commented 9 months ago

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6440.surge.sh