[解決済み】Reactでclsxを使用する方法

質問

Reactのコンポーネントにクラス名を割り当てる際のclsxのいくつかの使用方法を理解しようとしています。

構成

は十分明確です。classes.menuButton'を適用し、'open'というブール値の値が真であれば'class.hide'も適用します。

私の質問は、この2番目の例に関するものです。

className={clsx(classes.appBar, {[classes.appBarShift]: open })}

これは 'classes.appBar' を適用することになります。しかし、2番目のパラメータの意味は何でしょうか？

どのように解決するのですか？

{コード は、一般に、与えられた clsx

この構文は、あるクラスが、与えられた条件の評価で className

この例では const menuStyle = clsx({ [classes.root] : true, //always applies [classes.menuOpen] : open //only when open === true }) (これは次のように評価されます [classes.menuOpen]

randomclassName123 を基本的に出力します。 open === true 内挿 . ですから、一般的な方法ですが、必ずしも使う必要はありません。

サポートされている構文は多数あり、公式の ドキュメント

の代わりに

clsx

このように使うことができます。

string