@@在所有页面上运行，而不是仅在有响应的css-modules上运行

Question

我有只想在一个特定的React组件上运行的代码

@media print {

  @page {
    size: 3.49in 1.41in;
    outline: 1pt dotted;
    margin: 0;
    padding: 0;
    page-break-after: always;
  }
}

我正在使用css-modules，并且仅在通过路由呈现的单个组件上导入css文件。但这CSS在每个页面上运行，有没有办法做到这一点，使其仅在导入它的组件上运行？

Answer 1

[将其添加到react组件中修复-（这是一个骇人听闻的解决方案，但我找不到其他适用于电子的解决方案）

<style dangerouslySetInnerHTML={{
          __html: `
                @media print {
                  @page {
                    size: 3.49in 1.41in;
                    margin: 0;
                    padding: 0;
                    page-break-after: always;
                  }
                }
              `
        }}/>