Styling your Components

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 的更多信息，请访问他们的文档。

报告此页面问题