更改反应日选择器日历大小

Question

我已经为此苦苦挣扎了一段时间，我认为实际上应该非常简单。

使用DayPickerInput时，日历太小，我找不到调整其大小的方法。

有什么想法吗？

Answer 1

我找到了一种通过编辑 css 文件来做到这一点的方法 https://github.com/gpbl/react-day-picker/blob/master/src/style.css

只需编辑字体大小，它就会调整日历的大小。

 .DayPicker {
  display: inline-block;
  font-size: 2rem;
}

Answer 2

阅读本文档后https://react-day-picker.js.org/basics/styling，我通过修改 head_cell、table 和 day 类成功更改了日历宽度。 （您可以在此链接中查看完整的 StyledElement 列表：https://react-day-picker.js.org/api/types/StyledElement）。

<DayPicker
    mode="single"
    selected={selected}
    styles={{
      head_cell: {
        width: "60px",
      },
      table: {
        maxWidth: "none",
      },
      day: {
        margin: "auto",
      },
    }}
/>

另一趟：你可以把日历放在一个div中，并对其进行缩放（1.2）。示例：

<div style={{transform:"translate(1.2)"}}>
   <DayPicker
   //Your props
   />
</div>

Answer 3

您现在只需使用以下代码即可：

.rdp {
  --rdp-cell-size: 40px; // set your custom size here
  // ...any other globale style props
}

参见文档：https://react-day-picker.js.org/basics/styling

Answer 4

有谁知道在反应日期选择器中选择年份或月份时如何更改选项下拉菜单的高度