上手指南
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>
}