如何隐藏KeyboardDateTimePicker的聚焦闪烁光标？已尝试selectionColor无效

首先明确：selectionColor={'transparent'}确实对隐藏聚焦光标无效——这个属性的作用是设置文本选中时的高亮背景色，和输入光标（caret）没有关联，所以不会影响光标显示。

下面是几种可行的解决方案：

方案1：通过CSS修改光标颜色为透明 #

直接针对组件内部的input元素设置caret-color: transparent，这是最直接的方法：

方法A：使用自定义类名 #

给组件添加自定义类，然后编写CSS：

<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardDateTimePicker
  className="date-picker-no-caret"
  // 其他原有属性
/>
</MuiPickersUtilsProvider>

对应的CSS：

.date-picker-no-caret input {
  caret-color: transparent;
}

方法B：使用MUI的sx内联样式 #

无需额外CSS文件，直接通过sx属性设置：

<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardDateTimePicker
  sx={{ '& input': { caretColor: 'transparent' } }}
  // 其他原有属性
/>
</MuiPickersUtilsProvider>

方案2：禁用键盘输入（仅保留选择器交互） #

如果业务场景不需要用户通过键盘手动输入日期，只需要点击打开选择器选择，可以直接禁用键盘输入功能，这样光标自然不会出现：

<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardDateTimePicker
  disableKeyboard
  // 其他原有属性
/>
</MuiPickersUtilsProvider>

方案3：通过InputProps设置input样式 #

利用MUI组件的InputProps直接给内部input元素设置样式：

<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardDateTimePicker
  InputProps={{
    style: { caretColor: 'transparent' }
  }}
  // 其他原有属性
/>
</MuiPickersUtilsProvider>

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