为什么@media print复制我正在打印的组件？

Question

我正在处理React项目，当我想打印组件时遇到问题。

我正在使用CSS隐藏不想打印的组件，但是当我使用@media print时，我的组件在打印屏幕上出现了两次。

我正在使用window.print（），当我不使用@media打印时，打印屏幕仅包含一页。

OrderList桌面代码：

const OrderListDesktop = ({ classes, ids, state, ...props }) => {
  return (
    <div id="not-printable">
      <Datagrid
        {...props}
        ids={ids}
        rowStyle={rowStyle}
        rowClick="edit"
        classes={{ headerRow: classes.headerRow }}
      >
        <TextField source="id" type="number" />
        <TextField source="name" />
        <EnumField source="type" />
        <RichTextField source="content" cellClassName={classes.content} />
        <TextField source="resin" />
        {/*<RichTextField source="note" cellClassName={classes.content} />*/}
        <TextField source="clientName" />
        {/*<EmailField source="clientEmail" />*/}
        <DateField source="orderDate" showTime />
        <DateField source="deadLine" showTime />
        <DateField source="updateDate" showTime />
      </Datagrid>
    </div>
  );
};

OrderList代码（此代码允许OrderEdit显示在OrderListDesktop页面上方）：

class OrderList extends React.Component {
  render() {
    const { classes, ...props } = this.props;

    return (
      <div className={classes.root}>
        <Route path="/order/:id">
          {({ match }) => {
            const isMatch = !!(
              match &&
              match.params &&
              match.params.id !== "create"
            );

            return (
              <Fragment>
                <List
                  {...props}
                  className={classnames(classes.list, {
                    [classes.listWithDrawer]: isMatch
                  })}
                  filterDefaultValues={{ status: "todo" }}
                  filters={<OrderFilter />}
                  sort={{ field: "orderDate", order: "DESC" }}
                  perPage={10}
                >
                  <FinalTabbedDatagrid />
                </List>
                <Drawer
                  variant="persistent"
                  open={isMatch}
                  anchor="right"
                  onClose={this.handleClose}
                  classes={{
                    paper: classes.drawerPaper
                  }}
                >
                  {/* To avoid any errors if the route does not match, we don't render at all the component in this case */}
                  {isMatch ? (
                    <OrderEdit
                      id={match.params.id}
                      onCancel={this.handleClose}
                      {...props}
                    />
                  ) : null}
                </Drawer>
              </Fragment>
            );
          }}
        </Route>
      </div>
    );
  }

OrderEdit代码：

class OrderEdit extends React.Component {
  afterQuery = () => {
    this.props.push("/order");
    refreshView();
  };

  render() {
    const { classes, onCancel, record, ...props } = this.props;

    return (
      <EditController {...props}>
        {controllerProps =>
          controllerProps.record ? (
            <div className={classes.root} id="printable">
              <div className={classes.title}>
                <Typography variant="title">
                  {controllerProps.translate("resources.order.detail", {
                    id: controllerProps.record.id
                  })}
                </Typography>
                <IconButton onClick={onCancel}>
                  <CloseIcon />
                </IconButton>
              </div>
              <SimpleForm
                className={classes.form}
                basePath={controllerProps.basePath}
                record={controllerProps.record}
                save={controllerProps.save}
                version={controllerProps.version}
                redirect="list"
                resource="order"
                toolbar={
                  <OrderEditToolbar
                    onCancel={onCancel}
                    after={this.afterQuery}
                  />
                }
              >
                <DateField source="orderDate" showTime />
                <DateTimeInput
                  source="deadLine"
                  label="Deadline (Automatique)"
                  defaultValue={new Date(new Date().getTime() + 86400000 * 5)}
                />
                <TextInput source="name" formClassName={classes.inlineInput} />
                <SelectInput
                  source="type"
                  choices={typeChoices}
                  optionText="name"
                  optionValue="id"
                  formClassName={classes.inlineInput}
                />
                <SelectInput
                  source="status"
                  label="Statut"
                  choices={statusChoices}
                  optionText="name"
                  optionValue="id"
                />
                {/*<DateInput source="deadLine" />
                <SelectInput source="status" label="Statut" choices={statusChoices} optionText="name" optionValue="id" /> */}
                <TextInput
                  source="clientName"
                  formClassName={classes.inlineInput}
                />
                <TextInput
                  source="clientEmail"
                  type="email"
                  formClassName={classes.inlineInput}
                  validate={email()}
                />
                <TextInput
                  source="phoneNumber"
                  label="Téléphone"
                  formClassName={classes.phone}
                />
                <TextInput source="resin" label="Résine" rowsMax={5} />
                <LongTextInput source="content" rowsMax={15} />
                <LongTextInput source="note" rowsMax={5} />
                {/* <LongTextInput source="comment" rowsMax={10} /> */}
              </SimpleForm>
            </div>
          ) : null
        }
      </EditController>
    );
  }
}

我的CSS：

@media print {
  #not-printable {
    display: none;
  }

  #printable {
    display: block;
  }
}

我使用@media print，因为该组件与我不想打印的组件在同一页面上。

以下是一个示例：

但是当我要打印时：

如您所见，当我单击“订单列表”页面上的订单时，“订单编辑”页面显示在屏幕右侧的上方（同一页面上）。

OrderEdit页面是我要打印的页面，但是当我使用@media print隐藏OrderEdit组件后面的订单列表时，OrderEdit在打印屏幕上出现两次（两页内容相同）。