私は React コンポーネント ライブラリの開発を開始し、他の非 React プロジェクトと共有したいくつかの SCSS コードを再利用したいと考えていました。

これを実現するために、React コンポーネントで SASS モジュールを使用してみました。

単純な使用例は問題なく機能しますが、コンポーネント ライブラリを作成しているので、ボタンなどの特定のコンポーネントに複数のスタイルの組み合わせが必要です。

現在、Button コンポーネントに問題があります。このコンポーネントは非常に単純ですが、3 つの異なる variant 値があります。

これは Button.tsx ファイルです:

これは Button.module.scss ファイル:

私が期待していたのは、<Buttonvariant="default">I'm green</Button> のようなコンポーネントを使用すると、緑色のボタンが表示されますが、表示されるのは灰色です。ボタン。

これは codesandbox の例です

この問題で行き詰まっています。プロップ値に基づいてさまざまなスタイルを適用するのを手伝ってくれる人はいますか?