我正在重构一个应用程序，这样组件样式将从全局样式隔离到css模块。但是，我遇到了一个问题，样式不适用。
原始代码：

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

相关样式的代码：

.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进入，以确定元素的位置并应用SCSS模块中的相关样式。
在原始代码中，当在普通桌面视图中时，样式应用&.position1中的类并应用top: 4rem;样式。
然而，在使用clsx库和css模块的重构代码中，position${callOutPosition}的后一个类没有应用上述样式。
下面是重构后的代码：

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

我错过了什么还是这是错误的方法？