css - React with SASS 正在删除 CSS 页面大小参数

Question

我想创建一个模块化文档（仅 A4 输出）的反应组件中有一些 JSX。当我查看 chrome 检查器时，“size”属性似乎没有进入我使用 SCSS 的最终 CSS

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;
}

标签： cssreactjssasssize

Answer 1

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

您可以做的是添加自定义data-size属性并更改您的 CSS 以使用自定义属性。

我还建议您使用div而不是page.

像这样的东西：

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[data-size="A4"] {
  width: 21cm;
  height: 29.7cm; 
}
.page[data-size="A4"][data-layout="landscape"] {
  width: 29.7cm;
  height: 21cm;  
}
.page[data-size="A3"] {
  width: 29.7cm;
  height: 42cm;
}

<div class="page" data-size="A4">fdsaffdsa fdsafdsafdsa fdsa fdsa fds</div>