如何在打印时隐藏Material-UI凸起按钮

Question

我在网页上有一个按钮，通过javascripts window.print（）方法触发打印。不幸的是，在打印预览中，我仍然可以看到触发打印的按钮。有没有办法设置属性以便在点击后隐藏此按钮或在我尝试打印时隐藏它？

我在Material-UI网站上找不到任何有用的东西，也没有在SO上找到任何有用的东西。我想我将不得不使用CSS来处理这个问题，但我很好奇是否有其他人遇到过这个问题，并且他们发现了另一种隐藏按钮的方法。

此外 - 如果有必要，我可以隐藏我的整个工具栏组，但在该文档上没有什么突出的。

Answer 1

使用css中的@media print查询设置css进行打印

@media print
{    
    button
    {
        display: none !important;
    }
}

这应该有效。请参阅此处我将打印查询添加到material.ui网站的main.css

并注意通常会显示在＆＃34;简单示例＆＃34;中的按钮。当我去打印的部分不再存在时

Answer 2

使用displayPrint =“ none”属性将要隐藏的内容放入Box即可解决问题。示例：

<Box component="span" displayPrint="none">
    your screen only content (this hides when printing)
</Box>

材料UI文档here。