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

useCssVar

Tags:
Browser

一个 React Hook，允许你在组件中使用 CSS 变量。

演示

尝试切换暗黑模式或点击下方按钮以检查。

源码
`--ifm-background-color` in this doc:
`--color` of `<html>`:
skyblue
Mollit elit sunt, in et velit ipsum, duis, ad, proident eiusmod!

用法

请查看 API。

源码

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

🪝 Hook🎨 Demo📄 Document

API

const [variable, setVariable] = useCssVar(variableName, options, target)

变量名 VariableName

string，你想要使用的 CSS 变量的名称。

选项 Options

export type UseCssVarOptions = {
  /**
   * CSS 变量的默认值
   *
   * @defaultValue ''
   */
  defaultValue?: string
  /**
   * 是否观察 CSS 变量的更改
   *
   * @defaultValue false
   */
  observe?: boolean
}

元素目标 ElementTarget

ElementTarget 是一个联合类型，代表可以被定位的各种元素。

更多详情，请参见 ElementTarget 或 ElementTarget 类型。

() => document.documentElement by defaults.

返回值

与 React.useState 相同，返回一个包含当前 CSS 变量值的元组和一个更新它的函数。

export type UseCssVarReturns = readonly [string, ReactSetState<string>]