React中.module.scss样式不生效？className显示undefined

我在React组件中导入了Sublayout.module.scss的样式，但使用时样式未生效，且对应的className在渲染后显示为undefined。

Sublayout.module.scss 代码 #

.pl-6 {
    padding-left: 6rem !important;
}
.pr-6 {
    padding-right: 6rem !important;
}
.pl-12 {
    padding-left: 12rem !important;
}
.pr-12 {
    padding-right: 12rem !important;
}

React组件代码 #

import { FC, ReactNode } from "react";
import { Grid } from "@payping/web-components";
import styles from "./Sublayout.module.scss";

interface Props {
  children?: ReactNode;
  className?: string;
}

export const SubLayout: FC<Props> = (props: Props) => {
  const { children, className } = props;
  const sizes = Grid.useBreakpoint();

  // TODO not sure about top and bottom padding
  if (sizes.xxl) {
    console.log("xxl screen");
    return <div className={`${styles.pr12} ${styles.pl12} w-100 ${className}`}>{children}</div>;
  }
  if (sizes.xl) {
    console.log("xl screen");
    return <div className={`${styles.pr6} ${styles.pl6}  ${className}`}>{children}</div>;
  }
  if (sizes.lg) {
    console.log("lg screen");
    return <div className={`pr-3 pl-3 w-100 ${className}`}>{children}</div>;
  }
  if (sizes.md) {
    console.log("md screen");
    return <div className={`pr-2 pl-2 w-100 ${className}`}>{children}</div>;
  }
  if (sizes.sm) {
    console.log("sm screen");
    return <div className={`pr-1 pl-1 pe-10 ps-10 w-100 ${className}`}>{children}</div>;
  }
  if (sizes.xs) {
    console.log("xs screen");
    return <div className={`pr-1 pl-1 w-100 ${className}`}>{children}</div>;
  }

  return <div className={`ps-6 pe-6 w-100 ${className}`}>{children}</div>;
};

问题原因及修复方案 #

1. 类名不匹配（核心问题） #

CSS Modules中，SCSS里的**短横线命名类（kebab-case）**在导入的styles对象中，对应的属性名是带短横线的字符串，无法通过驼峰式（比如styles.pr12）直接访问。你代码中使用的styles.pr12、styles.pl12、styles.pr6、styles.pl6都是不存在的属性，所以会返回undefined。

修复方式二选一：

• 方式一：使用字符串索引访问类名
  把组件中对应的类名访问改成带短横线的字符串形式：

  // xxl屏幕分支
  return <div className={`${styles['pr-12']} ${styles['pl-12']} w-100 ${className}`}>{children}</div>;
  // xl屏幕分支
  return <div className={`${styles['pr-6']} ${styles['pl-6']} ${className}`}>{children}</div>;
  

• 方式二：修改SCSS类名为驼峰式
  把SCSS中的类名改成和组件中使用的一致的驼峰式：

  .pl6 {
      padding-left: 6rem !important;
  }
  .pr6 {
      padding-right: 6rem !important;
  }
  .pl12 {
      padding-left: 12rem !important;
  }
  .pr12 {
      padding-right: 12rem !important;
  }
  

2. 处理className为undefined的情况 #

当父组件没有传入className时，拼接字符串会导致最终的className中出现undefined字样，建议用数组过滤后拼接：

// 以xxl分支为例
return (
  <div className={[styles['pr-12'], styles['pl-12'], 'w-100', className].filter(Boolean).join(' ')}>
    {children}
  </div>
);

filter(Boolean)会自动移除数组中的undefined、null等值，避免无效的className。

内容的提问来源于stack exchange，提问作者Amir Moradi