搜索

首页  >  问答  >  正文

React组件库 + SASS模块化

我开始开发 React 组件库,并且想重用我们与其他非 React 项目共享的一些 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;
  }
}

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

这是codesandbox上的一个实例

我被困在这个问题上,有人可以帮助我根据道具值应用不同的样式吗?

P粉818306280P粉818306280272 天前423

全部回复(2)我来回复

  • P粉504080992

    P粉5040809922024-03-27 20:07:46

    请使用 classnames npm 库。

    import cn from 'classnames';
    
    

    回复
    0
  • P粉244155277

    P粉2441552772024-03-27 19:59:53

    雷雷

    回复
    0
  • 取消回复