Ich habe mit der Entwicklung einer React-Komponentenbibliothek begonnen und wollte einen Teil des SCSS-Codes wiederverwenden, den wir mit anderen Nicht-React-Projekten geteilt haben.

Um dies zu erreichen, habe ich versucht, SASS-Module in einer React-Komponente zu verwenden.

Ein einfacher Anwendungsfall funktioniert gut, aber ich erstelle eine Komponentenbibliothek und benötige mehrere Stilkombinationen für bestimmte Komponenten wie Schaltflächen.

Jetzt bin ich auf den Button 组件的问题。组件非常简单，但它有 3 个不同的 variant-Wert gestoßen.

Dies ist die Button.tsx-Datei:

import React from "react";
import styles from "./Button.module.scss";

type Variant = "default" | "primary" | "tertiary";

interface Props {
  children: String;
  variant: Variant;
}

export const Button: React.FC<Props> = ({ children, variant }) => {
  return <button className={`${styles.button} ${variant}`}>{children}</button>;
};

Dies ist die Button.module.scss-Datei:

.button {
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  background-color: grey;
  color: white;

  &.default {
    background-color: green;
  }
  &.primary {
    background-color: red;
  }
}

Was ich erwartet habe, ist, dass es, wenn ich eine Komponente wie <Buttonvariant="default">I'm green</Button> verwende, einen grünen Knopf geben würde, aber was ich bekomme, ist ein grauer Knopf.

Dies ist ein Beispiel für Codesandbox

Ich stecke bei diesem Problem fest. Kann mir jemand helfen, je nach Requisitenwert verschiedene Stile anzuwenden?