🐛[BUG] 用 createGlobalStyle 创建的样式存在卸载问题
pokerboard opened this issue · comments
🐛 bug 描述
当使用 createGlobalStyle 创建全局样式后,卸载时样式时内部没有保证会触发清除函数,导致样式一直被缓存。
通过排查,可以确定这是 emotion 内的 @emotion/use-insertion-effect-with-fallbacks 库使用了 React 18 的 useInsertionEffect 的原因(改成 useLayoutEffect 后打上补丁后正常运行)
styled-component 也出现过类似的问题 styled-components/styled-components#4101 (comment)
📷 复现步骤
useInsertionEffect(() => {
console.log('加载');
return () => {
console.log('卸载');
};
});
- A页面运行以上代码(记得首次刷新页面)
- 切换B页面,控制台只输出了“加载”
🏞 期望结果
emotion 短时间应该不会修复,建议打个补丁或 createGlobalStyle 更换 styled-component 的 createGlobalStyle
© 版本信息
- antd-style 版本: 3.6.1
- @emotion/use-insertion-effect-with-fallbacks 版本: 1.0.1
- umi 版本: 4.1.5
- 浏览器环境
有没有其他方法?我其实一直想替换掉这个createGlobalStyle了,emotion react 做的实在有问题
有没有其他方法?我其实一直想替换掉这个createGlobalStyle了,emotion react 做的实在有问题
目前没有
你建议怎么做?直接把代码拷过来自己搞一个?
你建议怎么做?直接把代码拷过来自己搞一个?
1.向 emotion 反馈
2.patch-package 给 @emotion/use-insertion-effect-with-fallbacks 打个补丁
@emotion+use-insertion-effect-with-fallbacks+1.0.1.patch
diff --git a/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js b/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
index 1b0e17d..5bc580d 100644
--- a/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
+++ b/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
@@ -4,7 +4,7 @@ var syncFallback = function syncFallback(create) {
return create();
};
-var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
+var useInsertionEffect = false;
var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;
我目前就这么用了