Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

cadleo
Copy link

@cadleo cadleo commented Nov 20, 2023

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

  1. 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) 不会生效

@cadleo cadleo changed the title 修复 ImageUploaderSpaceGrid 的样式权重问题及 --gap-horizontal--gap-vertical 变量未正常生效的问题 修复打包导致的 ImageUploaderSpaceGrid 样式的权重问题以及css变量作用域导致的 --gap-horizontal--gap-vertical 变量未正常生效的问题 Nov 20, 2023
---gap: var(--gap);
---gap-horizontal: var(--gap-horizontal, var(--gap));
---gap-vertical: var(--gap-vertical, var(--gap));
---gap-horizontal: var(--gap-horizontal);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自循环写法感觉很怪异,包括以前的写法也很怪。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自循环写法感觉很怪异,包括以前的写法也很怪。

确实比较奇怪,但个人暂未想到其他办法,除非在ts文件里把css变量pick出来,丢到 Space 和 Grid 组件上

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

从代码看之前就是想用外面配置的 ---gap-xxx 做传递。我感觉是换个变量名字会更好一些。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

从代码看之前就是想用外面配置的 ---gap-xxx 做传递。我感觉是换个变量名字会更好一些。

不建议改,一来向前兼容,二来能保持变量名与space和grid相同,降低理解成本

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那就不好搞了,--gap-horizontal 有了用 --gap-horizontal,没有才用 --gap 是预期行为。外部提供了 --gap-horizontal 也是“符合预期”的。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那就不好搞了,--gap-horizontal 有了用 --gap-horizontal,没有才用 --gap 是预期行为。外部提供了 --gap-horizontal 也是“符合预期”的。

所以也就俩选项了:用当前比较奇怪的css写法,或者写到ts里,pick之后放到space和grid上

Copy link

codecov bot commented Nov 21, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

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

Additional details and impacted files
@@           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           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants