如何在Reactjs中更改MUI DateCalendar的大小

Question

我有使用 MUI DataCalendar 显示日历的代码。

<LocalizationProvider dateAdapter={AdapterDayjs}>
   <DateCalendar/>
</LocalizationProvider>

我希望能够增加它的尺寸。

我尝试使用

sx

属性执行以下操作

<LocalizationProvider dateAdapter={AdapterDayjs}>
       <DateCalendar
         sx={{
           "& .MuiPickersDay-root": {
             height: "100px",
             minWidth: "100px",
           },
        }}
       />
</LocalizationProvider>

但是显示不正确。

Answer 1

我所做的事情中有很多肮脏的工作。这是我所拥有的，尝试使用 fontSizes：

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={i18n.language} >
  <DateCalendar
      sx={{
          '& .MuiBadge-badge': {
              // Adjustment for recordMade badge 
              fontSize: '0.7vw',
              paddingTop: '4px'
          },
          // '& .MuiPickersBasePicker-pickerView': {
          //     maxHeight: '800px',
          //   },

          '& .MuiDayCalendar-header': {
              // Needed for weekday adjustments (and padding if wanted)
              // Adjusts spacing between
              justifyContent: 'space-evenly',
              paddingTop: '1em',
              paddingBottom: "1em"
          },
          '& .MuiDayCalendar-weekContainer': {
              // Adjusts spacing between days (ie 1, 2, 3.. 27, 28)
              justifyContent: 'space-evenly'
          },
          '& .MuiPickersDay-dayWithMargin': {
              // Grows width/height of day buttons
              width: '100%',
              height: '100%',
              aspectRatio: '1',
              // height: 'auto',

              fontSize: '1.5vw',
          },
          '& .MuiBadge-root': {
              // Parent of button management
              aspectRatio: 1,
              width: '10%'
          },
          '& .MuiDayCalendar-weekDayLabel': {
              // Manages size of weekday labels
              aspectRatio: 0.9,
              width: '10%',
              fontSize: '1.5vw'
          },
          '& .MuiPickersCalendarHeader-label': {
              // Manages month/year size
              fontSize: '1.5vw',

          },


          // '& .MuiDayCalendar-monthContainer': {
          //     // Not sure if needed, currently works tho
          //     display: 'flex',
          //     flexDirection: 'column'
          // },
          '& .MuiDayCalendar-slideTransition': {
              // Handles size of week row parent, 1.6 aspect is good for now
              aspectRatio: '1.6',
          },

          width: '100%',
          maxHeight: '100%'
      }}


      showDaysOutsideCurrentMonth
      fixedWeekNumber={6}
      views={['day']}
      onChange={(e) => {
          console.log(monthRecords);
          setRecordDate(e);
          setRecordOpen(true)
          // handleOpenEditForm(e);
      }}
      onMonthChange={(e) => {
          handleNewCalendarDates(e);
      }}
      slots={{ day: RecordedDays, }}

  />
</LocalizationProvider>