如何从React组件中的SCSS模块动态定义className？

Question

我定义了按钮 React 组件，如下所示：

import Styles from './styles.module.scss';
import { IButton } from './button.types';
const Button = (props: IButton) => {
    const { variant, title, size } = props;

    return (
        <>
            <button className={`${Styles.btn}}`} >
                {title}
            </button>
         
        </>
    );

}
export default Button

我的样式定义如下：

.btn {
    cursor: pointer;
    border: none;
    font-family: "rayan-sans-default";

    &.primary {
        color: $basic-25;
        background-color: $brand-500;

        &--xs {
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
            padding: 2px 10px;

        }

        &--sm {
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            padding: 5px 14px;

        }

        &--md {}

        border-radius: $radius-xs;
    }


}

如果我的按钮组件使用如下：

<Button size="sm" variant="primary" title="primary"/>

我的

className

应该如何在 button.tsx 组件中定义以动态地具有当前尺寸类？

Answer 1

我认为实现这一点的唯一方法是根据您的 SCSS 结构构建密钥。

let classAttributes: string[] = [Styles.btn];

if (variant) classAttributes.push(Styles[`${variant}`]);

if (variant && size) classAttributes.push(Styles[`${variant}--${size}`]);

let classes = classAttributes.join(' ');
return (
  <>
    <button className={classes}>{title}</button>
  </>
);

演示@StackBlitz

Answer 2

看看下面的代码是否有帮助。 使用 variant 和 size 参数作为键来访问 Styles 的属性。

const Button = (props: IButton) => {
  const { variant, title, size } = props;
  const buttonSize = `${variant}--${size}`
  const buttonClass = `${Styles.btn} ${Styles[variant]} ${Styles[buttonSize]}`;
    
  return (
    <>
       <button className={buttonClass} >
          {title}
       </button>
    </>
  );
}