search

ShotaroHirose59 / nextjs-dashboard

Learn Next.js
https://nextjs-dashboard-dun-pi-28.vercel.app
0 stars 0 forks source link

Chapter2 CSS Styling #2

Open ShotaroHirose59 opened 4 months ago

ShotaroHirose59 commented 4 months ago

Reference: https://nextjs.org/learn/dashboard-app/css-styling

Currently, your home page doesn't have any styles. Let's look at the different ways you can style your Next.js application.

topics

ShotaroHirose59 commented 4 months ago

グローバルスタイル

通常はそれを最上位コンポーネントに追加することをお勧めします

app/layout.tsxでimportする

ShotaroHirose59 commented 4 months ago

Clsx 状態やその他の条件に基づいて要素を条件付きでスタイル設定する必要がある場合に使用する。 Reference: https://github.com/lukeed/clsx

こんな感じ

<span className={clsx(
  'inline-flex items-center rounded-full px-2 py-1 text-xs',
  {
    'bg-gray-100 text-gray-500': status === 'pending',
    'bg-green-500 text-white': status === 'paid',
  })}
>
ShotaroHirose59 commented 4 months ago

commits