Panda CSSを使ってボタンのスタイルを付けてみる

はじめに

ゼロランタイムCSSとして気になっているPandaCSSを触ってみます！
https://panda-css.com/

触ってみる

viteのプロジェクトを用意してください。

インストールと初期設定

Panda CSSのインストール

npm i -D @pandacss/dev

Panda CSSの初期化を行います。

npx panda init --postcss

package.jsonのscriptsに以下を追加します。

"prepare": "panda codegen"

src/index.cssを設定します。

src/index.css

@layer reset, base, tokens, recipes, utilities;

storybookの設定

preview.tsにimport "../src/index.css";を追加します。

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import "../src/index.css";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

インポートエイリアスの設定

Panda CSSで生成したスタイルシステムのインポートエイリアスを設定します。

tsconfig.jsonのpathsに"@s/*": ["./styled-system/*"]を追加します。

tsconfig.json

  "compilerOptions": {
  　...
    "paths": {
      "@/*": ["./src/*"],
      "@s/*": ["./styled-system/*"]
    }
    ...
  }

vite.config.tsにも以下のようにエイリアスの設定を追加します。

vite.config.ts

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@/", replacement: `${__dirname}/src/` },
      { find: "@s/", replacement: `${__dirname}/styled-system/` },
    ],
  },
});

以上で設定完了です。

適応してみる

早速ボタンを作成してみます。

src/components/parts/Button/Button.tsx

import { css } from "@s/css";

export default function Button({
  children,
  onClick,
  className = "",
  disabled = false,
}: {
  children?: React.ReactNode;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  className?: string;
  disabled?: boolean;
}) {
  return (
    <button
      disabled={disabled}
      className={
        css({
          bg: disabled ? "rgb(241, 243, 245)" : "rgb(34, 139, 230)",
          color: disabled ? "rgb(173, 181, 189)" : "#fff",
          rounded: "4px",
          h: "36px",
          p: "0px 18px",
          fontSize: "14px",
          _hover: disabled
            ? {}
            : {
                bg: "#1c7ed6",
              },
          _active: disabled
            ? {}
            : {
                transform: "translateY(1px)",
              },
          _focusVisible: {
            outline: "solid 2px rgb(34, 139, 230)",
            outlineOffset: "2px",
          },
        }) + className
      }
      onClick={onClick}
    >
      {children}
    </button>
  );
}

ボタンにスタイルがつきました！

cssが直接書けるのは便利です👍
単純なcssだけではなく、便利な記法をあるそうなので触っていけたらと思います✨