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

你的SCSS中尺寸类是基于变体拼接的格式（比如primary--sm），结合CSS Modules的特性，需要动态组合基础类、变体类和尺寸类，具体修改如下：

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

    // 收集有效类名，自动过滤空值
    const buttonClasses = [
        Styles.btn, // 基础按钮样式类
        variant && Styles[variant], // 变体类（如primary）
        variant && size && Styles[`${variant}--${size}`] // 尺寸类（如primary--sm）
    ].filter(Boolean).join(' ');

    return (
        <button className={buttonClasses}>
            {title}
        </button>
    );
}
export default Button

说明 #

• CSS Modules会将SCSS中的类名转换为唯一标识，必须通过Styles对象访问，不能直接写字符串类名
• 用数组收集类名再过滤空值，能避免variant或size未传入时出现无效空类名
• 对应你的SCSS结构，Styles[variant]匹配.btn.primary的变体样式，Styles[${variant}--${size}]匹配.btn.primary--sm的尺寸样式

这样使用<Button size="sm" variant="primary" title="primary"/>时，组件会自动应用三个类，正确加载对应的样式。

内容的提问来源于stack exchange，提问作者amir tbi