React TypeScript中移除TextField（type=time）下拉框的AM/PM选项

问题：使用Material-UI的TextField组件（type="time"）时，已经通过CSS隐藏了输入框内的AM/PM，但下拉选择框中的AM/PM选项仍无法去除，现有代码如下：

<TextField 
  sx={{
    width: '49%',
    '& .MuiInputLabel-root': {
      color: '#FFFFFF',
      '&.Mui-focused': {
        color: '#FFFFFF',
      },
    },
    '& .MuiOutlinedInput-root': {
      '& > fieldset': { borderColor: '#FFFFFF' },
      '&:hover fieldset': {
        borderColor: '#FFFFFF',
      },
      '&.Mui-focused fieldset': {
        borderColor: '#FFFFFF',
      },
      '& .MuiIconButton-root': {
        color: '#FFFFFF',
      },
      '& .MuiOutlinedInput-input': {
        color: '#FFFFFF',
      },
      '& input[type="time"]::-webkit-datetime-edit-ampm-field': {
        display: 'none',
      },
    },
    '& .gform_wrapper_1 div.gfield_time_ampm': {
      display: 'none',
    },
  }}
  label="Time Stop"
  value={selectedTimeStop} 
  type="time" 
  onChange={updateSelectedTimeStop} 
  inputProps={{
    step: "0.001",
    max: '23:59:59.999',
  }}
/>

方案1：通过原生input属性强制24小时制（推荐） #

浏览器原生time选择器的AM/PM显示逻辑依赖locale设置和时间范围，通过以下调整可直接移除下拉框中的AM/PM：

• 在inputProps中补充min="00:00:00.000"，与已有的max配合明确24小时时间范围
• 添加lang="en-GB"（或zh-CN等24小时制locale），强制浏览器以24小时制渲染选择器

修改后的inputProps代码：

inputProps={{
  step: "0.001",
  min: '00:00:00.000',
  max: '23:59:59.999',
  lang: 'en-GB'
}}

方案2：CSS隐藏浏览器picker中的AM/PM元素 #

若方案1在部分浏览器不生效，可针对性添加CSS隐藏picker内的AM/PM模块（以下为Chrome适配示例，其他浏览器需调整伪元素/类名）：
在原有sx样式的.MuiOutlinedInput-root节点下补充：

'& input[type="time"]::-webkit-calendar-picker-dialog .ampm-selector': {
  display: 'none !important'
}

方案3：改用Material-UI专用TimePicker组件（最稳定） #

原生input的样式限制较多，推荐使用@mui/x-date-pickers包的TimePicker组件，支持完全自定义时间格式，彻底规避AM/PM问题：

1. 安装依赖：

npm install @mui/x-date-pickers @emotion/react @emotion/styled

2. 组件使用示例：

import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

// 组件内部代码
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    label="Time Stop"
    value={dayjs(selectedTimeStop, 'HH:mm:ss.SSS')} // 转换为dayjs对象
    onChange={(newValue) => updateSelectedTimeStop(newValue.format('HH:mm:ss.SSS'))}
    format="HH:mm:ss.SSS" // 24小时制格式，无AM/PM
    sx={{
      width: '49%',
      // 复用原有样式...
      '& .MuiInputLabel-root': {
        color: '#FFFFFF',
        '&.Mui-focused': { color: '#FFFFFF' },
      },
      '& .MuiOutlinedInput-root': {
        '& > fieldset': { borderColor: '#FFFFFF' },
        '&:hover fieldset': { borderColor: '#FFFFFF' },
        '&.Mui-focused fieldset': { borderColor: '#FFFFFF' },
        '& .MuiIconButton-root': { color: '#FFFFFF' },
        '& .MuiOutlinedInput-input': { color: '#FFFFFF' },
      }
    }}
  />
</LocalizationProvider>

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