如何移除MUI中type为date的TextField组件自带的日历图标？

你的代码不生效、修改InputProps.endAdornment也无效，核心原因有两个：

• 你要移除的日历选择图标是浏览器给原生type="date"输入框渲染的默认控件，不是MUI组件库追加的后缀装饰节点，所以调整endAdornment配置根本作用不到这个元素
• MUI的TextField是多层嵌套的复合组件，原生input标签是组件内部的子节点，你直接在TextField根节点上写&::-webkit-calendar-picker-indicator，相当于给根div加伪元素样式，自然匹配不到内部的input

直接把选择器指向组件内部的原生input节点即可实现需求，参考代码如下：

<TextField
  sx={{
    '& .MuiInputBase-input::-webkit-calendar-picker-indicator': {
      display: 'none',
      '-webkit-appearance': 'none',
    }
  }}
  id="outlined-basic"
  variant="outlined"
  type="date"
  helperText="Please select the date"
/>

如果遇到样式优先级不够被覆盖的情况，给display: none加个!important标记就能稳定生效。

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