title: Force ExpansionPanel to be expanded, when printing
body: <p>I am using an <a href="https://material-ui.com/api/expansion-panel/#expansionpanel-api" rel="nofollow noreferrer">ExpansionPanel</a>,
  where I control the <code>expanded</code> state based on some conditions.</p>
  
  <p>Although, I want the ExpansionPanel to be always <code>expanded</code>, when I am printing (<code>window.print()</code>).</p>
  
  <p>What I intuitively wanted to try was:</p>
  
  <pre><code>//...
  
  const isPrinting = useMediaQuery("print")
  const controlledExpanded = useSomeMethodToControlExpanded()
  const expanded = isPrinting || controlledExpanded
  return (
    &lt;ExpansionPanel expanded={expanded}&gt;
      {/*...*/}
    &lt;/ExpansionPanel&gt;
  )
  </code></pre>
  
  <p>Although this won't work because of a <a href="https://material-ui.com/components/use-media-query/#simple-media-query" rel="nofollow noreferrer">bug in browsers</a>: </p>
  
  <p>Maybe somehow override the global styling would help, but I cannot figure out how.</p>
  
  <p>Any ideas?</p>