Mui DatePicker 更改图标位置

Question

我正在尝试自定义 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>

Answer 1

只需将 class 设置为 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)}
          />

Mui DatePicker 更改图标位置

Mui DatePicker change icon position

html

css

icons

reactjs

material-ui