打印时如何隐藏 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中添加了打印查询

并注意当我去打印时通常会显示在“简单示例”部分中的按钮不再存在

Answer 2

将要隐藏的内容放置在具有 displayPrint="none" 属性的 Box 中应该可以解决问题。示例：

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

材料用户界面文档here。