Как развернуть все шаги в пошаговом режиме Material UI для печати страницы?

Question

Я работаю над компонентом React, использующим пошаговый пользовательский интерфейс Material.Требование заключается в том, что данные также должны быть напечатаны.Когда вы печатаете, все шаги должны быть расширены и должны быть напечатаны.Это противоречит стандартному поведению степпера.@media print, похоже, не работает, так как Stepper управляется атрибутом 'active' для переключения отображения, а не только CSS-класса.Кто-нибудь достиг этого раньше?Компоненты пользовательского интерфейса материала с другим поведением только для печати?Дайте мне знать, спасибо.

Пример базового степпера - https://codesandbox.io/s/rm5713kkln

Answer 1

Недавно у меня был проект с такими же требованиями, и я не смог найти никакого решения с уровнем реагирующих компонентов.Тем не менее, я мог бы найти решение на уровне избыточного магазина.(Если вы пользуетесь магазином).

• Я добавил свою многошаговую форму в избыточную форму (https://redux -form.com / 7.4.2 / ) [Кстати, вы можете сделать это без библиотеки избыточных форм]
• , затем данные, добавленные в хранилище, были восстановлены на итоговой странице сводки.(последний шаг шагового шага)
• , поскольку на странице сводки есть все данные, которые я мог бы использовать с jsPDF (например, генератор PDF на стороне клиента) [https://mrrio.github.io/]
• наконец, я нашел этоподход был намного чище, чем использование HTML в pdf, так как я могу изменять и улучшать внешний вид и пользовательский интерфейс pdf по своему желанию.(это не зависит от пользовательского интерфейса HTML, только от данных)

надеюсь, это поможет вам.