【React】clsxの使い方

clsxって？

条件付きのclassName指定が簡単にできる関数です。

Next.jsでも紹介されてます。

どんな書き方ができるの？

記載例はこちら

classNameでは、こんな感じで使用します。

    <span
      className={clsx(
        'inline-flex',
        {
          'bg-gray-100': status === 'OK',
        },
        [
          isClick && 'text-white',
        ]
      )}
    >

単語は半角スペースで区切られます。
ネストしても結果がtrueのものだけ残ります。

clsx(
    'inline-flex' ,  
    [ true  &&  'items-center' ,  
        {  'rounded-full' : false ,  'px-2' : null  } ,
        [ 'py-1' ,  [ 'text-xs' ] ]
    ] 
); 
//'inline-flex items-center py-1 text-xs'

個人的には下記の２点の書き方以外は、グルーピングして見やすくために使うくらいでいいかなと思いました。

<span
  className={clsx(
    {
      'bg-gray-100': status === 'OK',
    },
    isClick && 'text-white',
  )}
>

おしまい