Create React App中CSS Modules的composes规则失效及组件组合方案咨询

先修复当前composes不生效的问题 #

你遇到的问题核心有两个：路径配置错误，以及组件没有正确接收外部传入的类名。

1. 修正composes的路径

在src/ProfilePage/Profile.module.scss中，你使用的绝对路径无法被CSS Modules正确识别。因为ProfilePage在src/ProfilePage目录，而ProfileImage在src/_components，需要用相对路径来定位：

.profileImage {
  composes: profileImage from '../_components/ProfileImage.module.scss';
  outline: 1px solid red;
}

如果你的构建工具（比如Webpack）配置了路径别名（比如@指向src），也可以用别名简化路径：

.profileImage {
  composes: profileImage from '@/_components/ProfileImage.module.scss';
  outline: 1px solid red;
}

2. 让ProfileImage组件支持外部类名扩展

你的ProfileImage组件目前只使用自身的styles.profileImage，没有处理外部传入的className，导致父组件传递的样式无法生效。修改组件代码，添加类名合并逻辑：

import styles from './ProfileImage.module.scss';
import clsx from 'clsx'; // 推荐用clsx安全合并类名，也可以手动拼接

interface ProfileImageProps {
  className?: string;
}

function ProfileImage ({ className }: ProfileImageProps) {
  return ( 
    <img className={clsx(styles.profileImage, className)} /> 
  )
}
export default ProfileImage;

如果不想额外安装库，也可以用模板字符串手动拼接：className={${styles.profileImage} ${className || ''}}，但clsx能更优雅地处理空值和多类名场景。

更贴近CSS-in-JS体验的组件组合方案 #

既然你怀念Emotion/styled-components的便捷性，推荐下面几种适配CSS Modules的样式复用思路：

方案1：组件级样式扩展（类名合并）

这是最贴近styled(Component)的思路：基础组件提供核心样式，父组件通过传递额外类名添加扩展样式。比如在ProfilePage中：

import styles from './ProfilePage.module.scss';
import ProfileImage from '../_components/ProfileImage';

function ProfilePage () {
  return ( <ProfileImage className={styles.profileImage} /> )
}
export default ProfilePage;

配合clsx合并类名，既能保留基础样式，又能灵活添加自定义扩展。

方案2：抽离公共可复用样式

把通用样式（比如尺寸、圆角）抽离到单独的公共模块，再通过composes在组件中导入复用，类似CSS-in-JS中的样式片段复用：

// src/styles/globals.module.scss
.smallAvatar {
  height: 50px;
  width: 50px;
}

.rounded {
  border-radius: 50%;
}

然后在ProfileImage.module.scss中复用：

.profileImage {
  composes: smallAvatar rounded from '../styles/globals.module.scss';
}

方案3：基于Props动态切换样式

如果需要像styled-components那样根据Props动态调整样式，可以在组件中根据Props选择对应类名：

// ProfileImage.tsx
import styles from './ProfileImage.module.scss';
import clsx from 'clsx';

interface ProfileImageProps {
  size?: 'small' | 'large';
  className?: string;
}

function ProfileImage ({ size = 'small', className }: ProfileImageProps) {
  return ( 
    <img 
      className={clsx(
        styles.profileImage,
        size === 'large' ? styles.largeAvatar : styles.smallAvatar,
        className
      )} 
    /> 
  )
}
export default ProfileImage;

对应的SCSS：

// ProfileImage.module.scss
.profileImage {
  border-radius: 50%;
}

.smallAvatar {
  height: 50px;
  width: 50px;
}

.largeAvatar {
  height: 100px;
  width: 100px;
}

使用时直接传Props：<ProfileImage size="large" />，体验和CSS-in-JS高度一致。

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