如何实现Material UI datetime-local类型TextField多行显示且保留日期编辑能力？

问题根因 #

直接为TextField开启multiline属性的方案存在原生能力硬伤：该属性会强制组件将渲染元素从原生<input>切换为<textarea>，直接丢失datetime-local类型对应的原生日期逐段编辑、系统级日期选择弹窗、输入格式自动校验等核心能力，完全无法满足保留原有编辑能力的要求。

可落地的实现方案（零渲染逻辑变更，完整保留原生输入能力） #

全程不触发multiline渲染分支，完全保留原生<input type="datetime-local">的渲染结构，通过样式调整实现窄宽度下的文本自动换行，从根源上解决容器宽度不足导致的文本截断问题：

• 保持TextField的默认单行input渲染逻辑，不修改type属性值，不开启multiline配置，从逻辑上避免textarea元素的渲染
• 针对目标输入元素覆盖浏览器默认样式：
  • 设置white-space: pre-line，打破原生日期输入默认不允许文本折行的限制
  • 移除浏览器给原生日期输入默认设置的固定高度约束，将height调整为auto，匹配对应内边距适配多行内容的视觉节奏
  • 调整输入框自带的日期选择图标定位：将图标设置为相对于输入框容器的绝对定位，固定在输入区域右侧，避免文本换行后出现图标与文本错位的问题
• 适配窄容器布局规则：给输入框的父级布局容器设置min-width: 0，解除flex布局下默认的内容最小宽度约束，让输入框可以正常收缩适配容器宽度，不会出现内容溢出被截断的情况

方案优势 #

• 100%保留原生datetime-local输入的全部交互能力：包括键盘逐段编辑日期/时间、浏览器原生日期选择弹窗、输入格式自动校验、屏幕阅读器无障碍适配
• 完全兼容TextField原有API：原有的value、onChange、校验规则、样式覆盖逻辑不需要做任何适配修改
• 无额外第三方依赖：组件性能与原生输入保持一致

适配注意事项 #

• 由于原生datetime输入的文本内容是在Shadow DOM内部渲染，样式覆盖需要通过对应选择器全局生效，避免样式被浏览器默认规则覆盖
• 针对旧版Chromium内核浏览器，需要额外移除input默认的text-overflow: ellipsis截断规则，替换为text-overflow: clip，保证折行效果正常生效
• 不要随意修改input的type属性值，否则会直接丢失原生日期编辑能力

内容的提问来源于stack exchange，提问作者M. Perez