react动态插入样式

这篇文章发表于 阅读 2

在开发组件过程中,偶尔需要动态的插入css,比如在在iframe中渲染组件后,iframe中是没有样式的,所以需要手动插入样式。

插入样式

通常是在useLayoutEffect中动态创建style标签

useLayoutEffect(() => { if (!ref.current) { const style = document.createElement('style'); document.head.append(style); ref.current = style; } ref.current.innerText = css; return () => { if (ref.current) { document.head.removeChild(ref.current); ref.current = undefined; } }; }, [css]);

useStyle

useStyle使用一个动态插入style的hook,将上面的代码进行了封装,方便使用。