React组件库+ SASS模块

Question

我开始开发一个库，我想重用一些我们与其他非反应性项目共享的SCSS代码。

为了实现这一点，我尝试在react组件中使用SASS模块。

这个简单的用例工作得很好，但是我正在创建一个组件库，我需要为一些组件(比如按钮)提供几个样式组合。

现在，我对Button组件有一个问题。组件非常简单，但它有3个不同的variant值。

下面是Button.tsx文件：

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

下面是Button.module.scss文件：

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

我所期望的是，如果我使用像<Button variant="default">I'm green</Button>这样的组件，那么就会有一个绿色按钮，但是我得到的是灰色按钮。

下面是码箱上的一个活生生的例子

我被困在这上面了，有人能帮我根据道具的价值应用不同的款式吗？

Answer 1

<button className={`${styles.button} ${styles[variant]}`}>

Answer 2

请使用classnames npm库。

import cn from 'classnames';

<button className={cn(styles.button, styles[variant])}>