重构为SCSS Module后样式不生效的问题排查

正在将应用重构为使用CSS Modules以隔离组件样式与全局样式，遇到样式不生效的问题。

原JSX代码：

<div className={`explainer-callout-wrapper position-${callOutPosition}`}>

相关SCSS样式代码：

.explainerCalloutWrapper {
  position: relative;

  @include media-breakpoint-up(md) {
    position: absolute;
    right: 0;
  }

  @include media-breakpoint-up(lg) {
    right: 0;
  }

  &.position1 {
    @include media-breakpoint-up(md) {
      top: 4rem;
    }

    @include media-breakpoint-up(lg) {
      top: 6rem;
    }
  }

  &.position2 {
    @include media-breakpoint-up(md) {
      top: 7rem;
    }

    @include media-breakpoint-up(lg) {
      top: 11rem;
    }
  }

  &.position3 {
    @include media-breakpoint-up(md) {
      top: 11.5rem;
    }

    @include media-breakpoint-up(lg) {
      top: 18rem;
    }
  }

  &.position4 {
    @include media-breakpoint-up(md) {
      top: 16rem;
    }

    @include media-breakpoint-up(lg) {
      top: 25.5rem;
    }
  }

  &.position5 {
    @include media-breakpoint-up(md) {
      top: 20.5rem;
    }

    @include media-breakpoint-up(lg) {
      top: 31.5rem;
    }
  }
}

${callOutPosition}通过props传入，用于确定元素位置并应用对应样式。原代码中.position1类能正常应用top:4rem样式，但使用clsx库和CSS Module重构后，position-${callOutPosition}类对应的样式未生效，重构后JSX代码：

<div className={clsx(styles.explainerCalloutWrapper, `position-${callOutPosition}`)}>

问题核心是CSS Modules会对所有类名进行哈希处理：你直接拼接的position-${callOutPosition}是原始类名，而SCSS里的.position1等类已经被转换成带哈希的唯一类名，两者完全不匹配，导致样式无法生效。

有两种可行的解决方式：

• 方法一：通过styles对象获取哈希后的位置类名
  把拼接的原始类名改成从styles对象中读取，确保类名和CSS Modules生成的哈希类名一致：

  <div className={clsx(styles.explainerCalloutWrapper, styles[`position${callOutPosition}`])}>
  

  注意SCSS中定义的是.position1，所以styles里对应的键是position1，需要直接把callOutPosition的数值拼接在position后，比如callOutPosition为1时，取styles.position1。

• 方法二：用:global()标记全局类（不推荐）
  如果一定要保留原始类名写法，可以在SCSS中把位置类标记为全局类，避免被CSS Modules哈希处理：

  .explainerCalloutWrapper {
    // ... 原有基础样式
  
    &:global(.position1) {
      @include media-breakpoint-up(md) {
        top: 4rem;
      }
      @include media-breakpoint-up(lg) {
        top: 6rem;
      }
    }
    &:global(.position2) {
      @include media-breakpoint-up(md) {
        top: 7rem;
      }
      @include media-breakpoint-up(lg) {
        top: 11rem;
      }
    }
    // 其他position类同理修改
  }
  

  这种方式下，.position1等类会保持原始名称，你拼接的position-${callOutPosition}能匹配到样式，但会破坏CSS Modules的样式隔离特性，仅适合特殊场景使用。

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