clsx 모듈 - css 조건 적용하기

설치

npm i clsx 

 

활용

 

button.tsx

className == css class 쪽에 clsx 와 : 을 이용해서 조건을 이용해서 css 가 적용되게 한다.

import clsx from "clsx";

export default function Button ({
    kind = 'default',
    ...props
} : React.ButtonHTMLAttributes<HTMLButtonElement> & {
    kind? : 'default' | 'important' | 'reference';
}) {
    return (
        <button
            className={clsx('rounded-lg px-3 py-1 text-sm font-medium', {
                'bg-gray-500 text-white hover:bg-gray-700': kind === 'default',
                'bg-red-500 text-white hover:bg-red-700': kind === 'important',
                'bg-blue-500 text-white hover:bg-blue-700': kind === 'reference',
            })}
            {...props}
            />
    )
}

 

various-buttons.tsx

'use client'

import Button from "./button"
import React, {useState} from "react"

export function DefaultButton() {
    const [clicked, setClicked] = useState(false)
    return (
        <Button kind="default" onClick={() => setClicked(true)}>
            {clicked ? 'default 클릭됨': 'Default 버튼'}
        </Button>
    )
}

export function ImportantButton() {
    const handleMouseOver = () => { alert('마우스 오버 이벤트 처리!');}
    return (
        <Button kind="important" onMouseOver={handleMouseOver}>
        {'Important 버튼'}
        </Button>
    )
}

export function ReferenceButton() {
    const handleDoubleClick = () => {alert('더블 클릭 이벤트 처리!')}
    return (
        <Button kind="reference" onDoubleClick={handleDoubleClick}>
            {'Reference 버튼'}
        </Button>
    )
}

 

page.tsx

import { DefaultButton, ImportantButton, ReferenceButton } from "./various-buttons";

export default function Home() {
    return (
        <main className="flex flex-col p-4 space-y-2">
            <DefaultButton />
            <ImportantButton/>
            <ReferenceButton/>
        </main>
    )
}