css文件中是否可以有多个@media打印_Css_Reactjs

css文件中是否可以有多个@media打印

css reactjs

css文件中是否可以有多个@media打印,css,reactjs,Css,Reactjs,我想在一个CSS文件中有两种不同的@page和@media打印样式。它也可以是分开的。为什么我需要2是我打印出条码和页面需要不同的大小打印时。目前正在发生的是，它对两种条形码都使用样式1样式。如果它只对条码1使用样式1样式，而对条码2使用样式2样式，我该如何设置它代码： CSS 条形码1 <body className="receipt1"> <section className="sheet1">

我想在一个CSS文件中有两种不同的@page和@media打印样式。它也可以是分开的。为什么我需要2是我打印出条码和页面需要不同的大小打印时。目前正在发生的是，它对两种条形码都使用样式1样式。如果它只对条码1使用样式1样式，而对条码2使用样式2样式，我该如何设置它

代码： CSS

条形码1

<body className="receipt1">
          <section className="sheet1">
            <table className="table_b10">
            <tbody>
              <tr>
                <td className="heading1_b10">Worksgroup</td>
              </tr>
              <tr>
                <td className="heading2_b10">SKU: {this.props.stateInfo.itemName}</td>
              </tr>
              <tr>
                <td className="heading2_b10">
                  <Barcode value={this.props.stateInfo.itemName} width={1} height={30} fontSize={0} margin={0} format="CODE128" />
                </td>
              </tr>
              <tr>
                <td className="heading2_b10">{this.props.stateInfo.itemDescription}</td>
              </tr>
              <tr>
                <td className="heading2_bb10">LOG-ID: {this.props.audit.id}</td>
              </tr>
            </tbody>
          </table> 
        </section>
      </body>


工作组
SKU:{this.props.stateInfo.itemName}
{this.props.stateInfo.itemDescription}
日志ID:{this.props.audit.ID}

条形码2

<body class="receipt2">
    <section class="sheet2">
          <table className="table_b5">
          <tbody>
            <tr>
              <td className="heading1_b5">Worksgroup</td>
            </tr>
            <tr>
              <td className="heading2_b5">Job No\PO:</td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.job.jobNumber}</td>
            </tr>
            <tr>
              <td className="heading2_b5">SKU:</td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.stateInfo.itemName}</td>
            </tr>
            <tr>
              <td className="heading3_b5">
                <Barcode value={this.props.stateInfo.itemName} width={0.75} height={25} fontSize={0} margin={0} format="CODE128" />
              </td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.stateInfo.itemDescription}</td>
            </tr>
            <tr>
              <td className="heading3b_b5">LOG-ID: {this.props.audit.id}
              </td>
            </tr>
          </tbody>
        </table>
        </section>
      </body>


工作组
作业编号\PO:
{this.props.job.jobNumber}
SKU：
{this.props.stateInfo.itemName}
{this.props.stateInfo.itemDescription}
日志ID:{this.props.audit.ID}

<body class="receipt2">
    <section class="sheet2">
          <table className="table_b5">
          <tbody>
            <tr>
              <td className="heading1_b5">Worksgroup</td>
            </tr>
            <tr>
              <td className="heading2_b5">Job No\PO:</td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.job.jobNumber}</td>
            </tr>
            <tr>
              <td className="heading2_b5">SKU:</td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.stateInfo.itemName}</td>
            </tr>
            <tr>
              <td className="heading3_b5">
                <Barcode value={this.props.stateInfo.itemName} width={0.75} height={25} fontSize={0} margin={0} format="CODE128" />
              </td>
            </tr>
            <tr>
              <td className="heading3_b5">{this.props.stateInfo.itemDescription}</td>
            </tr>
            <tr>
              <td className="heading3b_b5">LOG-ID: {this.props.audit.id}
              </td>
            </tr>
          </tbody>
        </table>
        </section>
      </body>