[英]Mui DatePicker change icon position
Im trying to customize mui DatePicker I was able to change the icon but not its position I want the icon to be in the beginning before the text and not in the end as the image shows here is my code我正在尝试自定义 mui DatePicker 我能够更改图标但不能更改其 position 我希望图标位于文本之前的开头而不是结尾,因为图像显示这里是我的代码
<ThemeProvider theme={calendarTheme}>
<DatePicker
disabled={false}
leftArrowButtonText={t("notification.previous_month")}
rightArrowButtonText={t("notification.next_month")}
minDate={today}
InputProps={{
classes: { notchedOutline: classes.noBorder },
}}
components={{
OpenPickerIcon: Table,
SwitchViewIcon: ArrowDown,
}}
value={value}
onChange={handlechange}
renderInput={(params: any) => (
<TextField
style={{
color: "red",
}}
{...params}
/>
)}
/>
</ThemeProvider>
Just set a class to DatePicker
which has following style:只需将 class 设置为具有以下样式的
DatePicker
:
const styles = {
root: {
"flex-direction": "row-reverse"
}
};
Then add it to DatePicker
:然后将其添加到
DatePicker
:
<DatePicker
keyboard
placeholder="MM/DD/YYYY"
format={"MM/DD/YYYY"}
InputProps={{
classes: { root: classes.root }
}}
value={this.state.selectedDate}
onChange={this.handleDateChange}
disableOpenOnEnter
animateYearScrolling={false}
autoOk={true}
clearable
onInputChange={(e) => console.log("Keyboard:", e.target.value)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.