上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useStyleTag

Tags:
Element

在 React 中，一个便于将样式标签应用到文档的 React Hook。

演示

尝试点击加载 CSS，然后在下方输入框中编辑样式（如 * { color: red; }），并查看样式应用到文档上的效果。

源码
#el-style-tag

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const styleTag = useStyleTag(initialCss, options)

选项 Options

export interface UseStyleTagOptions { /** * 应用样式的媒体查询 */ media?: string /** * 是否立即加载样式标签 * * @defaultValue true */ immediate?: boolean /** * 是否手动加载样式标签 * * @defaultValue false */ manual?: boolean /** * 样式标签的唯一标识符 * * @defaultValue 自动增长 */ id?: string }

返回值

export interface UseStyleTagReturns { /** * 样式标签的唯一标识符 */ id: string /** * CSS 内容 */ css: string /** * 设置 CSS 内容 */ setCss: (newCss: string) => void /** * 将 CSS 内容重置为初始值 */ resetCss(): void /** * 加载样式标签 */ load(): void /** * 卸载样式标签 */ unload(): void /** * 持有样式标签元素的 ref */ styleTag: MutableRefObject<HTMLStyleElement | null> /** * 持有样式标签加载状态的 ref */ isLoaded: MutableRefObject<boolean> }