Material-UI TextBox跨浏览器不识别换行符，Safari多行占位符\n失效求方案

这个问题本质上不是Material-UI TextField组件的实现Bug。MUI的多行输入框最终渲染的就是原生<textarea>元素，兼容差异来自浏览器本身的规则：Safari默认不会解析placeholder属性传入字符串中的\n转义换行符，而Chrome、Firefox等浏览器默认支持识别该字符实现换行。

方案1：全局样式配置（推荐，改动最小） #

直接给MUI输入框的占位符添加white-space: pre-line样式，即可让Safari正常识别\n实现换行，完全不需要修改业务代码里传的占位符字符串：

.MuiInputBase-input::placeholder {
  white-space: pre-line;
  /* 可选配置：解决长文本占位符溢出问题 */
  word-break: break-word;
}

这个样式的效果是：保留字符串中的换行符自动折行，同时合并多余的连续空格、缩进，不会打乱正常占位符的排版。

方案2：单组件局部配置（避免全局样式污染） #

如果不想给全局输入框加通用样式，可以通过MUI内置的sx属性，针对单个有兼容问题的多行输入框做局部样式定制：

<TextField
  multiline
  placeholder={"第一行占位符\n第二行占位符\n第三行占位符"}
  sx={{
    "& .MuiInputBase-input::placeholder": {
      whiteSpace: "pre-line"
    }
  }}
/>

方案3：低版本Safari兼容兜底 #

如果需要兼容Safari 14及更早的低版本浏览器，上面的CSS方案可能存在兼容失效的情况，这时可以放弃原生placeholder，改用自定义覆盖层占位符：

• 用绝对定位的透明层放在textarea上层，手动渲染带换行的占位符文本
• 监听textarea的聚焦、输入事件，根据输入框的当前值、聚焦状态控制自定义占位符的显隐
  该方案实现成本较高，非必要场景不推荐使用。

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