Mui DatePicker 更改图标位置

【问题标题】：Mui DatePicker change icon positionMui DatePicker 更改图标位置
【发布时间】：2021-12-29 16:50:44
【问题描述】：

我正在尝试自定义 mui DatePicker 我能够更改图标但不能更改其位置我希望图标位于文本之前的开头而不是结尾，因为图像显示这里是我的代码

 <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>

【问题讨论】：

标签： html css reactjs material-ui icons

【解决方案1】：

只需将类设置为DatePicker，其样式如下：

const styles = {
  root: {
    "flex-direction": "row-reverse"
  }
};

然后添加到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)}
          />

【讨论】：