Реакция с SASS удаляет параметр размера страницы CSS

Question

У меня есть некоторый JSX в реактивном компоненте. Я хочу создать модульный документ (только вывод формата A4). Когда я смотрю на инспектора chrome, атрибут "size", похоже, не входит в финал CSS Я использую S 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;
}

Answer 1

Нет тега <page> или size, который распознает React.

Что вы можете сделать, это добавить пользовательский атрибут 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>

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

Надеюсь, это поможет вам.