与SASS交互将删除CSS页面大小参数

Question

我想在React组件中创建一些JSX，我想创建一个模块化文档（仅A4输出）。当我查看chrome inspector时，“ size”属性似乎尚未使其进入最终的CSS中，我正在使用SCSS

function App() {
  return (
    <div className="App">
      <PageContainer/>

    </div>
  );
}

export default App;

带有组件

export default function PageContainer() {
  return (


    <page size="A4">fdsaffdsa fdsafdsafdsa fdsa fdsa fds </page>
  );
}

和CSS

body {
  background: rgb(204,204,204); 
}
page {
  background: blue;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}

Answer 1

[React没有识别出的<page>标签或size属性。

您可以做的是添加自定义data-size属性，然后将CSS更改为使用该自定义属性。

我也建议您使用div代替page。

Answer 2

CSS具有分页媒体的概念。您可以执行以下操作：

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
}

如果您要打印。然后您可以尝试一下。

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
   } 
}

希望这会对您有所帮助。