打印时强制展开面板

Question

我正在使用ExpansionPanel， 我根据某些条件控制expanded的状态。

尽管如此，我希望在打印（expanded）时ExpansionPanel始终为window.print()。

我直觉上想尝试的是：

//...

const isPrinting = useMediaQuery("print")
const controlledExpanded = useSomeMethodToControlExpanded()
const expanded = isPrinting || controlledExpanded
return (
  <ExpansionPanel expanded={expanded}>
    {/*...*/}
  </ExpansionPanel>
)

尽管由于bug in browsers而无法使用：

也许以某种方式覆盖全局样式会有所帮助，但我不知道该怎么做。

有什么想法吗？

Answer 1

您可以在CSS中使用@media print：

@media print { 
    div.MuiCollapse-container.MuiCollapse-hidden {
        min-height: auto !important;
        height: auto !important;
        visibility: visible !important;
    }
}

无需在react组件中添加任何内容