search

ant-design / ant-design-icons

⭐ Ant Design SVG Icons
https://ant.design/components/icon/
MIT License
939 stars 577 forks source link

updateCSS not compatiable with @ant-design/cssinjs StyleProvider container #568

Open yunsii opened 1 year ago

yunsii commented 1 year ago

https://github.com/ant-design/ant-design-icons/blob/996040119c34c3fad203174267df3e007ca50789/packages/icons-react/src/utils.ts#L153

After custom StyleProvider container with shadow root, it's still inject into body.

yaxiaoliu commented 1 year ago

有啥支持计划吗，我这边在使用的时候也遇到 shadowRoot 里的引用，被注入到外层的 html.head.style 里了

image
yunsii commented 1 year ago

目前我是查找 style[rc-util-key="@ant-design-icons"] 节点，自己插到 shadow root 内的

yaxiaoliu commented 1 year ago

目前我是查找 style[rc-util-key="@ant-design-icons"] 节点，自己插到 shadow root 内的

我是直接把这个标签里的样式拷贝到内部的 css module 里去了，查找节点插入 shadow root 存在时序上的延迟，体验不是太好

yunsii commented 1 year ago

我是直接把这个标签里的样式拷贝到内部的 css module 里去了，查找节点插入 shadow root 存在时序上的延迟，体验不是太好

那只能手动复制源码里的样式来处理了

IamFive commented 1 year ago

是直接把这个标签里的样式拷贝到内部的 css module 里去了，查找节点插入 shadow root 存在时序上的延迟，体验

完整的 css 文件是哪个，没找到。。

yunsii commented 1 year ago

@IamFive https://github.com/ant-design/ant-design-icons/blob/996040119c34c3fad203174267df3e007ca50789/packages/icons-react/src/utils.ts#LL88C14-L88C25 代码里的

IamFive commented 1 year ago

@IamFive https://github.com/ant-design/ant-design-icons/blob/996040119c34c3fad203174267df3e007ca50789/packages/icons-react/src/utils.ts#LL88C14-L88C25 代码里的

这个我倒是看到了，我以为还有一份，就是针对每个 icon 有一个偏移设置的。我记得原来的icon都是有单独设置 vertical-align，代码里好像没找到。

yunsii commented 1 year ago

这个我倒是看到了，我以为还有一份，就是针对每个 icon 有一个偏移设置的。我记得原来的icon都是有单独设置 vertical-align，代码里好像没找到。

看起来没有别的了吧，目前我没用这种方式，不知道会有什么问题

IamFive commented 1 year ago

这个我倒是看到了，我以为还有一份，就是针对每个 icon 有一个偏移设置的。我记得原来的icon都是有单独设置 vertical-align，代码里好像没找到。

看起来没有别的了吧，目前我没用这种方式，不知道会有什么问题

使用没影响就没关系，我是用的时候感觉有些icon没有跟文字对齐，有1px左右的偏移。

yunsii commented 1 year ago

使用没影响就没关系，我是用的时候感觉有些icon没有跟文字对齐，有1px左右的偏移。

那可以跟 antd 网站对比下