当父容器设置 `visibility: hidden` 时，其子元素默认不可见且无法打印；但通过 `@media print` 覆盖该样式，可实现在屏幕隐藏、打印时显示的精准控制。
在 Web 开发中，visibility: hidden 与 display: none 的行为有本质区别：前者保留文档流中的空间（即占位），后者则完全脱离布局。若你希望某区块在页面上“隐形但留空”，同时又能在用户触发 Ctrl+P 打印时正常呈现，直接在内联样式中写死 visibility: hidden 会导致打印样式无法生效——因为内联样式的优先级高于普通 CSS 规则，而 @media print 中的类选择器默认无法覆盖它。
✅ 正确做法是将可见性控制交由 CSS 类管理，并在打印媒体查询中主动重置：
.hide-for-print {
visibility: hidden;
}
@media print {
.hide-for-print {
visibility: visible !important; /* 可选：确保高优先级 */
}
}? 关键说明：
- 移除内联 style={{ visibility: 'hidden' }}，改用语义化类名（如 .hide-for-print），便于样式复用与维护；
- @media print 中的规则会自动在浏览器打印预览或实际打印时生效，无需 JavaScript 干预；
- 若存在其他高优先级样式干扰，可添加 !important 提升打印样式权重（但应谨慎使用）；
- 注意：visibility: visible 仅恢复可见性，不改变布局——该元素在打印页中仍保持原有尺寸和位置，符合“占位但隐藏”的原始需求。
? 补充提醒：Bootstrap 的 d-print-block 类仅控制 display 属性（如设为 block），它不能解除 visibility: hidden 的隐藏效果，因此必须配合 @media print 显式重置 visibility。这是开发者常忽略的细节。
综上，结构化分离“屏显逻辑”与“打印逻辑”，是实现精细打印控制的专业实践。
