Ch2 - CSS Styling
Table of Contents
全域樣式
- 專案將使用 Tailwind 來開發，請在
/app/layout.tsx最開頭加上import '@/app/ui/global.css';來引入全域樣式
// /app/layout.tsx
import '@/app/ui/global.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}使用 clsx
- 這裡介紹了一個套件 clsx，可以用來方便的處理 class name 的合併
- 你可能以前有用過 classnames 這個套件，而
clsx是它的更快更小的替代品 - 看個範例：
// /app/ui/invoices/status.tsx
import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-sm',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
// ...
)}其他 styling 方式
- 另外原文中也複習了一下其他 styling 的方式，如 CSS Module 可以做出 component 內的 scope class 避免命名衝突
- 若個人有需要也可以使用 Sass 或 CSS-in-JS 等方式，詳情可參考我之前另一篇筆記有導讀此部分文件
