@page 在使用 css-modules with react 时在所有页面上运行，而不是仅在一个页面上运行

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 运行s，有没有办法让我在导入它的组件上只运行s？

Answer 1

将此添加到 React 组件修复它 - （这是一个 hacky 解决方案，但我找不到任何其他适用于 electron 的解决方案）

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

@page 在使用 css-modules with react 时在所有页面上运行，而不是仅在一个页面上运行

@page runs on all pages instead of just one when using css-modules with react

css

reactjs

css-modules