Print MaterialUI Dialog полноэкранный - PullRequest
Новая
       30

Print MaterialUI Dialog полноэкранный

0 голосов
/ 28 января 2020

Я новичок в React и Material-UI и хочу напечатать свой текущий диалог.

Проблема в том, что я не могу найти способ максимизировать мой диалог для печати (установлен на fullScreen), не делая этого также в браузере. Поэтому я в основном хочу меньший диалог в моем браузере, а для диалога максимальный размер.

Вот мой базовый c код в TSX: 

import React, { Component} from 'react';
import { Button, Dialog } from '@material/core';

export default class MUITester extends Component {

 render(){
   return (
      <Dialog fullScreen={false}>
        <div>
          <Button onClick={() => window.print()}>
            PRINT            
          </Button>
         </div>
       </Dialog> 
     );
   }

и соответствующий css file: 

@media print {
   .print {
       fullScreen=true;
       color: blue;
    }  
}

Могу ли я решить эту проблему, используя css? Или я должен использовать React / Material-UI?

Ответы [ 3 ]

1 голос
/ 29 января 2020

Я решил это! Изменить классы диалога:

<Dialog classes={{paperFullScreen: "prePrint printDialog"}} fullScreen>

Вот мой css: 

.prePrint {
    height: auto !important;
    max-width: 600px !important;
}

/*Print Dialog*/
@media print {

    .printDialog {
        max-width: 100% !important;
    }
}
0 голосов
/ 28 января 2020

Вы можете установить ширину вашего диалога следующим образом: 

<Dialog  fullWidth={true} maxWidth='md'>
    <div>
      <Button onClick={() => window.print()}>
        PRINT            
      </Button>
     </div>
    </Dialog>

Как указано в Документации

0 голосов
/ 28 января 2020

Вам просто нужно добавить флаг fullScreen к модальному компоненту , чтобы получить полный экран.

Как показано ниже 

<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>

И если вы не хотите чтобы использовать fullScreen, просто удалите этот флаг fullScreen, и вам не нужно использовать CSS здесь.

...