Material ui type=date的TextField组件创建不需要的日历图标
由于某种原因,material ui提供的Material ui type=date的TextField组件创建不需要的日历图标,material-ui,react-typescript,Material Ui,React Typescript,由于某种原因,material ui提供的组件根据文本字段的类型在输入端生成一个小图标 如果type=“date”,则在输入的末尾会出现以下图标: 如果type=“time”那么我会得到一个时钟图标。 令人困惑的是,这些图标并没有显示在我测试的所有系统上。例如,我使用的虚拟机不显示这些图标,我的ios设备也是如此。但当我在本地试用时,这些图标就会出现 我已经阅读了for TextFields,但找不到这些图标的任何api引用。 首先,我认为它是某种endadorment,但试图用endordo
组件根据文本字段的类型在输入端生成一个小图标
如果type=“date”
,则在输入的末尾会出现以下图标:
如果type=“time”
那么我会得到一个时钟图标。
令人困惑的是,这些图标并没有显示在我测试的所有系统上。例如,我使用的虚拟机不显示这些图标,我的ios设备也是如此。但当我在本地试用时,这些图标就会出现
我已经阅读了for TextFields,但找不到这些图标的任何api引用。
首先,我认为它是某种endadorment
,但试图用endordonment
覆盖图标只会导致组件生成额外的图标/字符串
这是我的
组件:
<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
}}
/>
如果有人知道删除这些图标的方法,我洗耳恭听。..从元素中删除每个类都没有成功后,我意识到图标与html有关,因此我发现图标只是日期输入类型中提供的标准“向下箭头”的重新外观
使用此css将删除图标:
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;}
当然,这也删除了日期的“下拉列表”
有时候哑巴并不容易…对于使用材质ui的人来说
输入的css类的根
classes={{root: classes.InputRoot}}
风格
InputRoot: {
'&::-webkit-calendar-picker-indicator': {
display: 'none',
'-webkit-appearance': 'none'
}
}
你能提供一个如何实施的例子吗this@zwebie实际上,您只需要复制提供的代码并将其放入style.css或其他css文件中。提供的css将影响类型为“time”的所有输入。