Skip to content

React 模板 添加 clsx 库

  • React 模板 添加 clsx 库,用于添加多个类名
  • clsx
  • 使用示例代码:
jsx
import React from "react"
import clsx from "clsx"

const Index = () => {
  return <center className={clsx("login_index", "center")}>...</center>
}

export default Index
  • 其他使用方式
js
import clsx from "clsx"
// or
import { clsx } from "clsx"

// Strings (variadic)
clsx("foo", true && "bar", "baz")
//=> 'foo bar baz'

// Objects
clsx({ foo: true, bar: false, baz: isTrue() })
//=> 'foo baz'

// Objects (variadic)
clsx({ foo: true }, { bar: false }, null, { "--foobar": "hello" })
//=> 'foo --foobar'

// Arrays
clsx(["foo", 0, false, "bar"])
//=> 'foo bar'

// Arrays (variadic)
clsx(["foo"], ["", 0, false, "bar"], [["baz", [["hello"], "there"]]])
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx("foo", [1 && "bar", { baz: false, bat: null }, ["hello", ["world"]]], "cya")
//=> 'foo bar hello world cya'