React＆SCSS-使用@Media Query打印2种不同大小的2个不同页面

Question

使用的技术：React和SCSS

目标：打印尺寸为1000px的A页和288px的B页。

预期结果：使用@media print样式和使用window.print（）打印时，页面A和B的大小分别为1000px x 1000px和288px x 288px。

实际结果：使用@media print设置样式并使用window.print（）打印时，页面A和B的尺寸均为1000px x 1000px。

我尝试将.scss文件及其类分开，但结果仍然相同。这是我在1 .scss文件中合并类时的代码。

@mixin band($name) {
  @if $name == yellow {
    @media print {
        size: 1000px 1000px;
      background-color: $name;
    }
  } @else if $name == white {
    @media print {
      size: 288px 288px;
      background-color: $name;
    }
  } @else {
    font-size: 20px
  }
}

.band-white {
    @include band($name: white);
}

.band-black {
    @include band($name: yellow);
}

感谢您的帮助。谢谢！