如何使react日选择器变宽，以填充网络应用程序移动版中的所有屏幕

Question

问题是我找不到一种合适的CSS样式的方法来让react day picker足够宽，可以填满所有的移动显示器。

我尝试过自定义react day picker提供的css文件，并应用了很多样式，但都没有成功。

.DayPicker{显示：flex；弯曲方向：行；证明内容的合理性：两者之间的空间；字体大小：2.5rem；边距：0；页边空白：2rem；}.DayPicker包装{位置：相对；弯曲方向：行；用户选择：无；宽度：100%；}.DayPicker月份{显示：flex；柔性包裹：包裹；弯曲方向：柱；}.DayPicker月份{显示：表格；边距：0；页边空白顶部：自动；边框间距：0；边界塌陷：塌陷；用户选择：无；}.DayPicker导航栏{位置：相对；}.DayPicker导航按钮{位置：绝对；顶部：1.4rem；页边空白：2px；宽度：1.25em；身高：1.25em；背景位置：居中；背景大小：60%；背景重复：不重复；颜色：#8B998；游标：指针；大纲：无；}.DayPicker导航按钮：悬停{不透明度：0.8；}.DayPicker导航按钮--上一页{左：10px；}.DayPicker导航按钮--下一个{右侧：10px；}.DayPicker导航按钮--交互已禁用{显示：无；}.DayPicker标题{显示：表格标题；边距底部：0；边框：1px实心#e9e9e9；填充：0.5em 0.5em；背景颜色：#f1f1f1；文本对齐：居中；}.DayPicker工作日{display：表头组；页边空白：1em；}.DayPicker WeekdaysRow{显示：无；}.DayPicker工作日{显示：表格单元格；填充：0.5em；颜色：#8B998；文本对齐：居中；字体大小：0.875em；}.DayPicker正文{显示：表格行组；}.DayPicker周{}DayPicker Day{显示：表格单元格；填充：0.8em；边框：1px实心#d0d4d9；垂直对齐：居中；文本对齐：居中；游标：指针；宽度：8.9vw；}

我想让日历足够宽，以填满我的网络应用程序(移动版)中的所有移动屏幕。

Answer 1

我不知道怎么做的，但我做到了。下面是解决方案：

.DayPicker {
flex-direction: row;
font-size: 2.5rem;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.DayPicker-wrapper {
position: relative;
flex-direction: row;
user-select: none;
width: 100%;
margin: 0;
padding: 0;
}
.DayPicker-Months {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.DayPicker-Month {
display: table;
margin: 0;
padding: 0;
margin-top: auto;
border-spacing: 0;
border-collapse: collapse;
user-select: none;
}
.DayPicker-NavBar {
position: relative;
margin: 0;
padding: 0;
}
.DayPicker-NavButton {
position: absolute;
top: 1.4rem;
margin-top: 2px;
width: 1.25em;
height: 1.25em;
background-position: center;
background-size: 60%;
background-repeat: no-repeat;
color: #8B9898;
cursor: pointer;
outline: none;
}
.DayPicker-NavButton:hover {
opacity: 0.8;
}
.DayPicker-NavButton--prev {
left: 10px;
background-image: url('../../images/navLeft.png');
}
.DayPicker-NavButton--next {
right: 10px;
background-image: url('../../images/navRight.png');}
.DayPicker-NavButton--interactionDisabled {
display: none;
}
.DayPicker-Caption {
display: table-caption;
border: 1px solid #e9e9e9;
padding: 0.5em 0.5em;
background-color: #f1f1f1;
text-align: center;
margin: 0;
}
.DayPicker-Caption > div {
font-family: "Open Sans", monospace;
font-weight: 600;
margin: 0;
padding: 0;
}
.DayPicker-WeekdaysRow {
display: none;
margin: 0;
padding: 0;
}
/*.DayPicker-Body {
display: table-row-group;
}*/
.DayPicker-Week {
display: table-row;
margin: 0;
padding: 0;
}
.DayPicker-Day {
display: table-cell;
padding: 0.8em;
border: 1px solid #d0d4d9;
vertical-align: middle;
text-align: center;
cursor: pointer;
width: 6rem;
margin: 0;
}

.DayPicker-TodayButton {
background-color: transparent;
background-image: none;
box-shadow: none;
color: #4A90E2;
font-size: 0.875em;
cursor: pointer;
}