如何设置mui-x日期选择器日历轮廓

Question

我正在使用"mui/x-date-pickers/DatePicker"；，我想得到一个轮廓日历像这张图片。概述日历

我试过"& .MuiPickersDay-root": {borderRadius: "2px", background: "#ffffff", border: `1px solid #c6cbce`,},，但我弄错了日历。这不是我想要的。

如何获取第一个链接日历？

Answer 1

以下是一个如何使日历弹出窗口具有边框的解决方案，就像您正在尝试的那样。

工作代码沙盒

您需要使用DatePicker的PopperProps添加样式

// Set your styling
const calendarSx = {
"& .MuiPickersDay-dayWithMargin": {
borderRadius: "0",
outline: "1px solid black",
margin: "0px 1px 0 0"
},
"& .MuiDayPicker-weekContainer": { margin: "1px" }
};

{/* Addit to your DatePicker component     */}
<DesktopDatePicker
label="Date desktop"
inputFormat="MM/DD/YYYY"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
PopperProps={{
sx: calendarSx
}}
/>