type=date 的 TextField 组件创建不需要的日历图标

Question

material-ui提供的<TextField>组件由于某种原因会根据TextField的type在输入的末尾生成一个小图标。

如果 type="date" 那么我在输入的末尾得到这个图标：

如果type="time"那么我得到一个时钟图标。令人困惑的是，这些图标并未显示在我正在测试的所有系统上。例如，我使用的虚拟机不显示这些图标，我的 ios 设备也是如此。但是当我在本地尝试时，这些图标出现了。

我已经阅读了有关 TextFields 的 documentation，但我找不到这些图标的任何 api 参考。首先我认为它是某种 endAdornment，但试图用 endAdornment 覆盖图标只会导致组件生成额外的 icons/strings.

这是我的 <TextField> 组件：

<TextField
    onChange={this.OnChange.bind(this)}
    name="date"
    value={this.state.date}
    label={GetText(Text.Date)} 
    variant="filled"
    type="date"
    InputProps={{
        disableUnderline: true,
        style: {
            backgroundColor: "#FFFFFF",
            borderRadius: "4px",
            border: "1px solid #CED4DC",
            fontSize: ".81em",
        }
    }}
    InputLabelProps={{
        shrink: true
    }}
/>

如果有人知道删除这些图标的方法，我会洗耳恭听。

Answer 1

...从元素中删除每个 class 但没有成功后，我意识到该图标与 html 有关，因此我发现该图标只是标准的重新换肤日期输入类型中提供的“向下箭头”。

使用此 css 删除图标：

input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;}

但当然这也删除了日期的“下拉列表”。

有时候装傻也不容易...

Answer 2

对于使用 material-ui

的人

为输入的cssclass的根

classes={{root: classes.InputRoot}}

样式

InputRoot: {
'&::-webkit-calendar-picker-indicator': {
      display: 'none',
      '-webkit-appearance': 'none'
    }
}

type=date 的 TextField 组件创建不需要的日历图标

TextField component with type=date creates unwanted calendar icon

material-ui

react-typescript