⛳

【NextJs14】NextJs14 と便利なライブラリ【#８Clerk Themes】

2023/12/19に公開

Next.js

Clerk

shadcn/ui

tech

【#８Clerk Themes】

YouTube: https://youtu.be/AFdQBjVLPMs

https://youtu.be/AFdQBjVLPMs

今回はClerkのスタイリングについて解説します。

Clerkのコンポーネントはpropsで
「appearance」を設定することができます。

「appearance」のオブジェクトには
「elements」を設定することができて、
こちらにスタイルを加えたい要素を記述していきます。

どの要素を設定できるかは、
ブラウザのデベロッパーモードで生成されたコードの
各要素のクラスを参考にするかと良いかと思います。

app/(main)/protected/page.tsx

import { UserButton, auth, currentUser, UserProfile } from "@clerk/nextjs";
import { dark } from "@clerk/themes";
import Image from "next/image";

const ProtectedPage = async () => {
  const { userId } = auth();
  const user = await currentUser();

  return (
    <div className="flex flex-col p-10">
      <div className="flex items-center gap-x-2">
        <UserButton afterSignOutUrl="/" />
        <p>User ID: {userId}</p>
      </div>
      <ul className="flex flex-col p-6">
        <li>
          User Name: {user?.lastName} {user?.firstName}
        </li>
        <li>User Email: {user?.emailAddresses?.[0].emailAddress}</li>
        <li className="flex gap-x-2">
          User Image:{" "}
          <Image src={user?.imageUrl!} width={30} height={30} alt="User" />
        </li>
      </ul>
      <UserProfile
        appearance={{
          baseTheme: dark,
          elements: {
            card: {
              // boxShadow: "none",
            },
          },
        }}
      />
    </div>
  );
};

export default ProtectedPage;

さらにテーマ用のライブラリも用意されています。

npm install @clerk/themes

こちらは「appearance」の「baseTheme」に
インポートした「dark」を設定します。

こちらにつきましては、
現状ですとモード変更ボタンと連動しておりません。

クライアントサイドとサーバーサイドの
コンポーネント同士の連携が難しいので、
バージョンアップで良い方法があれば改めてご紹介します。

【#８Clerk Themes】

Discussion