cx関数とは

この cx は styled-system (Panda CSS) が提供しているユーティリティ関数で、

className を安全に結合するために使います。

1. そもそも何をしている？

普通に CSS クラスを結合するときはこんな書き方をしますよね 👇

<div className={`${stepItem} ${isActive ? activeStepItem : ""}`}>

• isActive が true → "stepItem activeStepItem"
• isActive が false → "stepItem "（余分な空文字が入る）

この書き方でも動きますが、

複数の条件が増えると 可読性が悪くなる し、 "undefined" や "false" が混ざることもあります。

2. cx の役割

<div className={cx(stepItem, isActive && activeStepItem)}>

これだと：

• isActive が true → "stepItem activeStepItem"
• isActive が false → "stepItem"

👉 つまり 条件付きでクラスを安全に結合してくれる 関数です。

3. React でよくある比較

• 素の JavaScript → ${...} を使う
• よく使うライブラリ → classnames パッケージ (cx とほぼ同じ動き)
• PandaCSS / styled-system → cx が標準で用意されてる

4. 実際の動作イメージ

cx("foo", false && "bar", "baz");
// => "foo baz"

cx("foo", true && "bar", "baz");
// => "foo bar baz"

---

✅ まとめ

• cx は 複数の className を結合する便利関数
• falsy な値（false, null, undefined）は無視してくれる
• だから isActive && activeStepItem のような条件式を素直に書ける