How to set mui-x datepicker calendar outlined?

Feralbuddleia 0
Viewed 32

I'm using "@mui/x-date-pickers/DatePicker", I want to get an outlined calendar like this image. outlined calendar

I have tried "& .MuiPickersDay-root": {borderRadius: "2px", background: "#ffffff", border: `1px solid #c6cbce`,}, but I got this wrong calendar. It's not what I want.

How can I get the first link Calendar?

variant datepicker calendar material-ui
1 Answers

Here is a solution of how you can make your calendar popup have borders like the outlined you are trying.

Working codesandbox

You need to add the styling using the PopperProps of the DatePicker

    // 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
      }}
    />
Akis0
Related