colliedog 最近的时间轴更新 colliedog 最近的时间轴更新 |
colliedogV2EX 第 669175 号会员，加入于 2023-12-31 21:30:49 +08:00 |
| 写了个静态提取 css 的 css-in-jss 的库，能不能给点个 star
https://github.com/colliejs/colliejs
1 分享创造 • colliedog • 324 天前 • 最后回复来自 colliedog
|
3 |
colliedog 最近回复了
324 天前 回复了 kiddyu 创建的主题 › 分享创造 › Sutando: 把最好用的 ORM 复刻到 Node.js |
prisma 不香吗？
324 天前 回复了 colliedog 创建的主题 › 分享创造 › 写了个静态提取 css 的 css-in-jss 的库，能不能给点个 star
https://github.com/colliejs/colliejs |
@privateproxies 感谢大佬
326 天前 回复了 colliedog 创建的主题 › 分享创造 › 写了个静态提取 css 的 css-in-jss 的库，能不能给点个 star
https://github.com/colliejs/colliejs |
import { absYCenter } from "@collie-ui/css";
import { makeStyled } from "@colliejs/react";
import { collieConfig } from "../collie.config";
export const styled = makeStyled(collieConfig);
export const StyledButton = styled("button", {
w: 100,
h: 40,
_hover: {
opacity: 0.8,
background: "$primary",
borderRadius: 10,
color: "white",
},
_after: {
h: "100%",
w: [10, 4],
background: "red",
...absYCenter({ right: 0 }),
},
variants: {
size: {
full: {
w: "100%",
},
big: {
w: 80,
},
md: {
w: 40,
},
sm: {
w: 20,
},
dynamic: x => ({
//any size you want
w: x,
}),
},
shape: {
round: {
borderRadius: 9999,
},
rect: {
borderRadius: 0,
},
},
status: {
disabled: {
true: {
cursor: "not-allowed",
background: "$gray200",
},
},
},
},
compoundVariants: [
{
size: "big",
shape: "round",
css: {
background: "$gray200",
},
},
],
defaultVariants: {
shape: "rect",
},
});
import { makeStyled } from "@colliejs/react";
import { collieConfig } from "../collie.config";
export const styled = makeStyled(collieConfig);
export const StyledButton = styled("button", {
w: 100,
h: 40,
_hover: {
opacity: 0.8,
background: "$primary",
borderRadius: 10,
color: "white",
},
_after: {
h: "100%",
w: [10, 4],
background: "red",
...absYCenter({ right: 0 }),
},
variants: {
size: {
full: {
w: "100%",
},
big: {
w: 80,
},
md: {
w: 40,
},
sm: {
w: 20,
},
dynamic: x => ({
//any size you want
w: x,
}),
},
shape: {
round: {
borderRadius: 9999,
},
rect: {
borderRadius: 0,
},
},
status: {
disabled: {
true: {
cursor: "not-allowed",
background: "$gray200",
},
},
},
},
compoundVariants: [
{
size: "big",
shape: "round",
css: {
background: "$gray200",
},
},
],
defaultVariants: {
shape: "rect",
},
});
Select Language