reactjs MUI -更改日期选取器标题元素顺序

c2e8gylq  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(176)

是否可以更改标题元素的顺序?我希望箭头位于“月-年”标题的左右两侧,而不是像现在这样。下图正是我所要实现的目标:
代码和框:https://codesandbox.io/s/stupefied-butterfly-rkss81?file=/src/App.js x1c 0d1x的所有数据
你知道我该怎么做吗?
我尝试使用PrivatePickersFadeTransitionGroupMuiPickersCalendarHeader类名称,但不起作用。
谢谢你

gcxthw6b

gcxthw6b1#

尝试将当前样式替换为以下样式:

const dateTimePaperPropsStyles = {
  sx: {
".MuiPickersCalendarHeader-root": {
  display: "flex",
  alignItems: "center",
  justifyItems: "center"
},
".MuiPickersCalendarHeader-root:first-child": {
  order: 0,
  paddingRight: "20px",
  paddingLeft: "20px"
},
".MuiPickersArrowSwitcher-root": {
  display: "inline-flex"
  // visibility: "hidden"
},
".MuiPickersCalendarHeader-label": {
  textAlign: "center"
},
".MuiPickersArrowSwitcher-spacer": {
  width: "220px"
},
".css-31ca4x-MuiPickersFadeTransitionGroup-root": {
  display: "flex",
  position: "absolute",
  paddingLeft: "80px"
},
".css-9reuh9-MuiPickersArrowSwitcher-root": {
  marginLeft: "-2px"
},
".MuiPickersArrowSwitcher-button": {
  paddingRight: "7px"
}
 }
};

link to sandbox

相关问题