0

反応コンポーネントでは、css モジュールを使用しており、正常に動作しているこの条件付き css を取得しましたが、classnames ライブラリを使用してリファクタリングしたいと考えています。

className = { `${active ? styles.activeLabel : styles.notActiveLabel} 
${weight === 'bold' ? styles.bold : ''}`}

だから私はこれを試しましたが、アクティブが常にfalseを返すというエラーメッセージが表示されます。

className={classnames({styles.activeLabel: !!active}, {styles.bold: weight === 'bold'})}

styles.activeLabel: active === true も試しましたが、別のエラー メッセージが表示されます。基本的に、アクティブな小道具がtrueの場合はactiveLabelクラスを適用し、アクティブがfalseの場合はnotActiveLabelクラスを適用します。クラス名を使用してこれを達成するにはどうすればよいですか?

4

1 に答える 1