简体中文

useCssVar

Tags:

Browser

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

演示

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

源码

`--ifm-background-color` in this doc:

`--color` of `<html>`:

skyblue

Consequat incididunt fugiat excepteur, sint esse officia minim anim sunt 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>]

ON THIS PAGE

#useCssVar

#演示

#用法

#源码

#API

#变量名 VariableName

#选项 Options

#元素目标 ElementTarget

#返回值

useCssVar

演示

用法

源码

API

变量名 VariableName

选项 Options

元素目标 ElementTarget

返回值