如何扩展 Material UI stepper 中的所有步骤以打印页面？

Question

我正在开发一个使用 Material UI 步进器的 React 组件。 要求是数据也必须是可打印的。但是，当您打印时，所有步骤都应该扩展并且必须打印。这违反了步进器的默认行为。 @media print 似乎不起作用，因为 Stepper 是通过 'active' 属性控制来切换显示的，而不仅仅是 CSS 类。有没有人实现过这个？仅用于打印的具有不同行为的材料 UI 组件？告诉我谢谢。

基本步进器示例 - https://codesandbox.io/s/rm5713kkln

Answer 1

最近我有一个要求相同的项目，但找不到任何具有 React 组件级别的解决方案。 但是，我可以从 redux 商店级别找到解决方案。 （如果您使用的是商店）。

• 我将多步骤表单添加到 redux 表单 (https://redux-form.com/7.4.2/) [顺便说一句，您可以在没有 redux 表单库的情况下执行此操作]
• 然后将添加到存储中的数据检索到最终摘要页面。 （步进器的最后一步）
• 由于摘要页面包含所有数据，因此我可以将这些数据与 jsPDF 一起使用（如客户端 PDF 生成器）[https://mrrio.github.io/]
• 最后，我发现这种方法比在 pdf 中使用 HTML 更简洁，因为我可以根据需要更改和改进 pdf 的外观和 UI。 （它不依赖于 HTML UI，只依赖于数据）

希望这会对你有所帮助。