Macaron
编辑此页面Macaron 是编译时 CSS-in-JS 库,提供类型安全。
安装
- 为您的打包器安装并设置 macaron 插件:
- 在
vite.config.js
文件中,在其他插件之前添加 macaron 插件:
import { macaronVitePlugin } from "@macaron-css/vite";import { defineConfig } from "vite";
export default defineConfig({ plugins: [ macaronVitePlugin(), // other plugins ],});
用法
- 从
@macaron-css/solid
导入styled
并创建一个样式组件:
import { styled } from "@macaron-css/solid";
const Button = styled("button", {});
- 添加默认应用于组件的样式:
import { styled } from "@macaron-css/solid";
const Button = styled("button", { base: { backgroundColor: "red", borderRadius: "10px", },});
可以使用 variants
键添加变体:
import { styled } from "@macaron-css/solid";
const Button = styled("button", { base: { backgroundColor: "red", borderRadius: "10px", }, variants: { color: { violet: { backgroundColor: "violet", }, gray: { backgroundColor: "gray", }, }, },});
此外,defaultVariants
默认设置为 variants
,可以在使用时被覆盖:
import { styled } from "@macaron-css/solid";
const Button = styled("button", { base: { backgroundColor: "red", borderRadius: "10px", }, variants: { color: { violet: { backgroundColor: "violet", }, gray: { backgroundColor: "gray", }, }, }, defaultVariants: { color: "blue", },});
这些组件可以像任何其他 Solid 组件一样使用,并具有类型安全的 props。有关如何使用macaron 的更多信息,请访问他们的文档。