J'ai commencé à développer une bibliothèque de composants React et je voulais réutiliser du code SCSS que nous partagions avec d'autres projets non-React.

Pour y parvenir, j'ai essayé d'utiliser des modules SASS dans un composant React.

Un cas d'utilisation simple fonctionne bien, mais je crée une bibliothèque de composants et j'ai besoin de plusieurs combinaisons de styles pour certains composants comme les boutons.

Maintenant, j'ai rencontré la valeur Button 组件的问题。组件非常简单，但它有 3 个不同的 variant.

Voici le Button.tsx fichier :

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>;
};

Voici le Button.module.scss fichier :

.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;
  }
}

Ce à quoi je m'attendais, c'est que si j'utilise un composant comme <Buttonvariant="default">I'm green</Button>, il y aurait un bouton vert, mais ce que j'obtiens est un bouton gris.

Ceci est un exemple sur codesandbox

Je suis bloqué sur ce problème, quelqu'un peut-il m'aider à appliquer différents styles en fonction de la valeur de l'accessoire ?