useCssVar

Tags:

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

演示

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

源码
`--ifm-background-color` in this doc:
`--color` of `<html>`:
skyblue
Anim mollit in velit deserunt elit exercitation in consectetur nostrud!

用法

请查看 API。

源码

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

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 是一个联合类型,代表可以被定位的各种元素。

更多详情,请参见 ElementTargetElementTarget 类型

() => document.documentElement by defaults.

返回值

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

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