Material UI TextField打印异常求助：多行文本打印显示错误

你遇到的这个问题，核心原因是屏幕样式和打印样式的冲突，尤其是你设置的textarea { overflow: hidden; }在文本内容较多时，会直接截断超出部分；再加上MUI的TextField内部组件的动态高度逻辑，在打印预览环境下可能失效，导致内容显示异常。下面是几个针对性的解决办法：

方案1：用打印媒体查询重置关键样式 #

最推荐的方式是通过CSS媒体查询，专门针对打印场景调整样式，不会影响正常的屏幕显示：

/* 屏幕样式保持不变，新增打印专属样式 */
@media print {
  textarea {
    overflow: visible !important;
    height: auto !important;
    min-height: 120px; /* 给个最小高度，避免内容过少时容器塌陷 */
  }
  .subsection {
    grid-template-rows: auto; /* 确保网格容器不限制子元素高度 */
  }
}

这个方案的好处是纯CSS解决，不需要修改JS逻辑，打印时textarea会自动适配内容高度，所有文本都能完整显示。

方案2：直接针对MUI组件类调整打印样式 #

如果方案1没生效，可能是MUI的内部组件样式优先级更高，你可以直接针对它的内置类名修改：

@media print {
  .MuiOutlinedInput-root {
    height: auto !important;
  }
  .MuiOutlinedInput-inputMultiline {
    height: auto !important;
    overflow: visible !important;
    white-space: pre-wrap; /* 强制文本换行，避免横向溢出 */
  }
}

MUI的多行输入框会给内部元素加上MuiOutlinedInput-inputMultiline类，强制它的高度自适应和文本换行，就能解决截断问题。

方案3：JS动态切换样式（备选方案） #

如果CSS媒体查询因为某些原因不生效，你可以在打印前后用JS临时修改样式：

const handlePrint = () => {
  // 打印前，找到所有textarea并移除限制
  const textareas = document.querySelectorAll('textarea');
  textareas.forEach(ta => {
    ta.style.overflow = 'visible';
    ta.style.height = 'auto';
  });

  // 触发打印
  window.print();

  // 打印完成后恢复原样式
  setTimeout(() => {
    textareas.forEach(ta => {
      ta.style.overflow = '';
      ta.style.height = '';
    });
  }, 100);
};

之后你把原来直接调用window.print()的地方，改成调用这个handlePrint函数就行，这样能确保打印时文本完全展示，打印后恢复界面原来的样子。

额外小提示 #

• 尽量不要给TextField或者它的父容器设置固定高度，固定高度是长文本打印截断的常见元凶；
• 可以给TextField加上rows={3}或类似属性，设置一个默认的行数，让容器有足够的初始高度，同时允许自动扩展；
• 检查一下title属性，你代码里给TextField加了title={props.data.MetodyWyceny}，这个在打印时不会影响，但如果文本过长，title的提示意义不大，可以考虑去掉。

内容的提问来源于stack exchange，提问作者Corleone