1.0.29 • Published 1 month ago
class-css v1.0.29
class-css
一个 css-in-js 库, 可用于样式局域化,以及通过 js 控制样式。
Quick Start
运行一个简单的示例程序。
import { css } from "class-css";
import React, { useState } from "react";
export default () => {
const [color, setColor] = useState("black");
return (
<div>
<div>
<button onClick={() => setColor("red")}>红色</button>
<button onClick={() => setColor("blue")}>蓝色</button>
</div>
<div className={css({ color })}>测试文字</div>
</div>
);
};
Use In Project
在项目中使用。
In React.
import React from "react";
import { css } from "class-css";
export default () => {
return <div className={css({ color: "red" })}>一段文字</div>;
};
In Vue.
<template>
<div :class="css({ color: 'red' })">一段文字</div>
</template>
<script setup>
import { css } from 'class-css';
</script>
Compare with @emotion/css ?
class-css 能比 @emotion/css 创建更少的dom节点。
@emotion/css 调用 css 方法时,如果不存在于缓存中,则不断创建 style 标签。
class-css,仅会在全局创建唯一 style 标签,并采用增量添加的形式添加新的样式文本到 style 标签中。
Why use css-in-js library?
- 实现 style 不支持的功能,例如:伪选择器(:hover)等。
- 方便替换主题色。
- 局域样式,不影响全局样式。
- 可以通过类名进行全局覆盖 css-in-js 样式。
- 无需加载额外的 css 文件
1.0.29
1 month ago
1.0.26
2 months ago
1.0.28
2 months ago
1.0.27
2 months ago
1.0.25
2 months ago
1.0.24
7 months ago
1.0.23
7 months ago
1.0.22
7 months ago
1.0.21
7 months ago
1.0.20
7 months ago
1.0.19
7 months ago
1.0.18
7 months ago
1.0.17
7 months ago
1.0.16
7 months ago
1.0.15
7 months ago
1.0.14
7 months ago
1.0.13
7 months ago
1.0.12
7 months ago
1.0.11
7 months ago
1.0.10
7 months ago
1.0.9
7 months ago
1.0.8
7 months ago
1.0.7
7 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.4
7 months ago