Learn Next.js_CH02.CSS Styling

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

Global Styles

/app/ui 폴더 안에, global.css라는 파일이 있다.
앱의 모든 루트에 적용되는 CSS 규칙을 여기에 추가할 수 있다.
앱의 컴포넌트 어디에서나 global.css를 import 할 수 있지만, 최상에 하는 것이 가장 좋다.
Next.js에서, 이것은 root layout이다.

/app/layout.tsx로 navigate해 global.css 파일을 import해 전역 스타일을 추가하자

global.css 파일 안에 보면, @tailwind directives를 볼 수 있다.

Tailwind

CSS 전처리 툴
class 이름을 추가해 스타일 할 수 있다.

<h1 className="text-blue-500">I'm blue!</h1>

css 스타일이 전역 공유 되었지만, 각 클래스는 각 요소에 단일 적용될 수 있다.
create-next-app 으로 새 프로젝트 시작 시, Next.jsㄴㄴ 테일윈드를 사용할 것인지 묻는다.
yes 선택 시 자동으로 Tailwind 세팅이 적용된다.

/app/page.tsx에서 테일윈드를 사용해 볼 것이다.
p 태그 위 다음을 복붙한다.

<div
  className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"
/>

CSS Modules

자동으로 유니크한 클래스 이름을 생성해 CSS를 컴포넌트에 스코프할 수 있도록 한다.
따라서 스타일 충돌을 걱정 하지 않아도 된다.

위에서 만들었던 검정 삼각형을 CSS 모듈에서 똑같이 만들어볼 것이다.

1. /app/ui 안에, home.module.css를 만들고 다음 코드를 추가한다.

.shape{
    height: 0;
    width: 0;
    border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

2. /app/page.tsx 파일 안에 스타일을 import 하고 styles.shape로 추가한 클래스 이름으로 대체한다.

import styles from '@/app/ui/home.module.css';
      .
      .
      .
      <div className={styles.shape} />

Tailwind와 CSS 모듈은 Next.js를 스타일링하는 두 가지의 공통 방법이다.
선호하는 바에 따라 작성하도록 !

Using the clsx library to toggle class names

state나 다른 조건에 따라 요소를 조건부 스타일링해야할 때가 있을 것이다.
clsx는 클래스 이름을 쉽게 토글하는 라이브러리이다. 다음은 사용 방법이다.

• status를 허용하는 InvoiceStatus 컴포넌트 생성 시, status는 pending | paid여야 한다.
• paid 라면 초록색, pending이라면 회색이 되게 한다.

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',
        },
      )}
    >
    // ...
)}