MUI - изменить порядок элементов заголовка выбора даты

Можно ли изменить порядок элементов заголовка? Я хочу, чтобы стрелки были справа и слева от названия месяца-года, а не так, как сейчас. Изображение показывает именно то, чего я пытаюсь достичь:

Codesandbox: https://codesandbox.io/s/stupefied-butterfly-rkss81?file=/src/App.js

У вас есть идеи, как я могу этого достичь?

Я пытался использовать PrivatePickersFadeTransitionGroup и MuiPickersCalendarHeader имена классов, но это не сработало.

Спасибо

reactjs material-ui

21.11.2022 08:23

Хук useOnClickOutside в ReactJS

Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...

Хуки (часть-2) - useEffect

Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...

[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]

Я научился создавать карусель в ReactJS с помощью библиотеки Splide.

Краткое введение в Styled-компоненты

В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...

ДЕНЬ 8 | Страница обзора в React

На этом сегодня все, завтра снова увидимся с новым проектом!

Как настроить среду разработки React.

Весь процесс настройки среды разработки react.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте заменить текущий стиль на этот:

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"
}
 }
};

Ссылка на песочницу

Это отличное решение, просто добавьте дополнительную информацию, в .css-31ca4x-MuiPickersFadeTransitionGroup-root вы можете использовать { position: "absolute", marginLeft: "auto", marginRight: "auto", left: 0, right: 0, textAlign: "center" // необязательно, зависит от вашего варианта использования } Чтобы центрировать заголовок средства выбора даты «идеально»

— 09.01.2023 21:12

21.11.2022 13:19