Как применить стили к календарю в MUI компонента DatePicker
Я использую компонент DatePicker из Mui и пытаюсь стилизовать компонент Calendar, добавляя свойства position:abusolte, letf и 'top'.
Моя цель — выровнять правую часть компонента TextField и календаря.
Это нынешний вид...
Вот что я хочу....
Как я могу добавить стили в календарь?
Вот демо-код
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
export default function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<DatePicker
label = "Basic example"
value = {value}
onChange = {(newValue) => {
setValue(newValue);
}}
renderInput = {(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
Попытки
1, я добавил PopperProps реквизит, но это не сработало...
<DatePicker
label = "Basic example"
value = {value}
onChange = {(newValue) => {
setValue(newValue);
}}
renderInput = {(params) => <TextField {...params} />}
PopperProps = {{
sx: {'&.MuiPickersPopper-root': {position: 'absolute', top:'4px', left:'-23px'}},
}}
/>
2, использование стилизованного компонента
export const DatePicker = styled(DesktopDatePicker)`
& .MuiPickersPopper-paper {
position: absolute;
left: -23px;
top: 4px;
}
`;
3, Добавлено, что содержит TextField
return (
<div style = {{ margin: "100px" }}>
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<DatePickerStyled
label = "Basic example"
value = {value}
onChange = {(newValue) => {
setValue(newValue);
}}
renderInput = {(params) => (
<div
style = {{
display: "flex",
justifyContent: "flex-end"
}}
>
<TextField {...params} />
</div>
)}
/>
</LocalizationProvider>
</div>
);
}
- Добавьте
sxреквизит вTextField
return (
<div style = {{ margin: "100px" }}>
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<DatePickerStyled
label = "Basic example"
value = {value}
onChange = {(newValue) => {
setValue(newValue);
}}
renderInput = {(params) => (
<div>
<TextField
{...params}
sx = {{
display: "flex",
justifyContent: "flex-end"
}}
/>
</div>
)}
/>
</LocalizationProvider>
</div>
);
Ответы 1
Вы очень близки к рабочему решению. Вы должны настроить таргетинг на компонент слота popper и оформить его соответствующим образом. Документы довольно окольные в объяснении этого, и мне потребовалось некоторое время, чтобы понять. Попробуй это:
<DatePicker
label = "Basic example"
value = {value}
onChange = {(newValue) => {
setValue(newValue);
}}
renderInput = {(params) => <TextField {...params} />}
slotProps = {{
popper: {
placement: "bottom-end"
}
}}
sx = {{
width: "400px"
}}
/>
Вы также можете добавить ключ sx к объекту popper выше, если вам нужен индивидуальный стиль. Однако клавиша placement должна выполнять то, что вы хотите.
Обновлять
=========
Вот решение, которое перемещает весь ввод вправо на основе наших комментариев ниже. Просто вставьте DatePicker внутрь MUI Box и выровняйте содержимое по гибкому концу:
import * as React from "react";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
export default function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<Box
sx = {{
display: "flex",
justifyContent: "flex-end"
}}
>
<DatePicker
label = "Basic example"
value = {value}
onChange = {(newValue) => {
setValue(newValue);
}}
renderInput = {(params) => <TextField {...params} />}
slotProps = {{
popper: {
placement: "bottom-end"
}
}}
sx = {
{
// width: "400px"
}
}
/>
</Box>
</LocalizationProvider>
);
}
Когда я использую инструмент разработчика Google для просмотра элементов, в теге div для диалогового окна календаря есть data-popper-placement. Поэтому я изменил это значение на bottom-end с bottom. Но это ничего не дало. Я также пробовал top-right, top-left и т. д.
Я попробовал приведенный выше код на коде, который вы связали. Ширина вашего средства выбора даты меньше ширины всплывающего окна, что делает его выровненным по левому краю. Я отредактирую приведенный выше код, чтобы установить ширину, и вы сможете увидеть результаты.
Попробуйте редактирование, которое я только что сделал
О, TextField должен быть шире диалогового окна календаря? В моем случае ширина ввода текста должна быть меньше, чем диалоговое окно календаря.
Я не уверен в вашем точном сценарии. Все, что мне нужно, это кодовая ручка, которую вы связали. В codepen средство выбора даты выровнено по левому краю в браузере, и его ширина меньше, чем всплывающее окно календаря. Из-за этого поппер будет выглядеть выровненным по левому краю, даже если он пытается быть выровненным по правому краю. Имеет ли это смысл?
Да, это имеет смысл. и что я хочу сделать здесь, так это то, что ширина ввода текста должна быть 250px, а не 400px. Могу ли я по-прежнему выровнять оба по правой стороне? Большое спасибо!
Самый простой способ выровнять по правому краю — поместить текстовое поле внутри div и просто выровнять прямо внутри div. Я должен работать сейчас, но могу помочь позже сегодня, это все еще не имеет смысла
Я добавил попытку № 3, заключающуюся в заключении TextField в тег div с display: 'flex', justifyContent: 'flex-end', но это тоже не работает. Я ценю вас, если вы могли бы помочь мне с этим. Спасибо!
Спасибо за ответ! Тем не менее, я все еще вижу тот же оригинальный стиль.