score:-1

you just need to add fullscreen flag to modal component in order to achieve full screen.

like below

<dialog fullscreen open={open} onclose={handleclose} transitioncomponent={transition}>

and if you don't want to use fullscreen, simply remove that fullscreen flag and don't need to use css here.

score:0

you can set the width of your dialog like this:

<dialog  fullwidth={true} maxwidth='md'>
    <div>
      <button onclick={() => window.print()}>
        print            
      </button>
     </div>
    </dialog> 

as given in the documentation

score:0

for printing div, which is inside dialog, use below code, and add css also

import react, { component} from 'react';
import { button, dialog } from '@material/core';

export default class muitester extends component {

 render(){
   return (
      <dialog classes={{paperfullscreen: "preprint"}} fullscreen>
        <div id="dialogprint">
           some text some text , some paragraph and so on 
         </div>
         
          <div >
              <button onclick={() => window.print()}>
                print            
              </button>
         </div>
         
       </dialog> 
     );
   }
}

add below code in css

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

/*print dialog*/
@media print {
    body * {
        visibility: hidden;
    }
    #dialogprint,
    #dialogprint * {
        visibility: visible;
    }
    #dialogprint {
        position: absolute;
        left: 0;
        top: 0;
    }
}

score:0

i was looking for a full-screen dialog on mobile and a simple dialog for desktop and the below example resolved my issue, please take a look if helps.

import usemediaquery from '@mui/material/usemediaquery';

function mycomponent() {
    const theme = usetheme();
    const fullscreen = usemediaquery(theme.breakpoints.down('md'));
    return <dialog fullscreen={fullscreen} />;
}

you can check demo on mui official documentation.

score:2

i solved it! change the classes of dialog:

<dialog classes={{paperfullscreen: "preprint printdialog"}} fullscreen>

here my css:

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

/*print dialog*/
@media print {

    .printdialog {
        max-width: 100% !important;
    }
}

Related Query

More Query from same tag