Css 如何使react day picker变宽以填充web app移动版中的所有屏幕
问题是我找不到一个合适的CSS样式来让react day picker的宽度足够填充所有的移动显示 我尝试过定制react day picker提供的css文件,应用了很多样式,但都没有成功 .DayPicker { display: flex; flex-direction: row; justify-content: space-between; font-size: 2.5rem; margin: 0; margin-top: 2rem; } .DayPicker-wrapper { position: relative; flex-direction: row; user-select: none; width: 100%; } .DayPicker-Months { display: flex; flex-wrap: wrap; flex-direction: column; } .DayPicker-Month { display: table; margin: 0; margin-top: auto; border-spacing: 0; border-collapse: collapse; user-select: none; } .DayPicker-NavBar { position: relative; } .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; } .DayPicker-NavButton--next { right: 10px; } .DayPicker-NavButton--interactionDisabled { display: none; } .DayPicker-Caption { display: table-caption; margin-bottom: 0; border: 1px solid #e9e9e9; padding: 0.5em 0.5em; background-color: #f1f1f1; text-align: center; } .DayPicker-Weekdays { display: table-header-group; margin-top: 1em; } .DayPicker-WeekdaysRow { display: none; } .DayPicker-Weekday { display: table-cell; padding: 0.5em; color: #8B9898; text-align: center; font-size: 0.875em; } .DayPicker-Body { display: table-row-group; } .DayPicker-Week { } .DayPicker-Day { display: table-cell; padding: 0.8em; border: 1px solid #d0d4d9; vertical-align: middle; text-align: center; cursor: pointer; width: 8.9vw; } DayPicker先生{ 显示器:flex; 弯曲方向:行; 证明内容:之间的空间; 字体大小:2.5rem; 保证金:0; 边缘顶端:2rem; } .DayPicker包装机{ 位置:相对位置; 弯曲方向:行; 用户选择:无; 宽度:100%; } .DayPicker月{ 显示器:flex; 柔性包装:包装; 弯曲方向:立柱; } .DayPicker月{ 显示:表格; 保证金:0; 页边顶部:自动; 边界间距:0; 边界塌陷:塌陷; 用户选择:无; } .DayPicker导航栏{ 位置:相对位置; } .DayPicker导航按钮{ 位置:绝对位置; 顶部:1.4rem; 边缘顶部:2倍; 宽度:1.25em; 高度:1.25em; 背景位置:中心; 背景大小:60%; 背景重复:无重复; 颜色:#8B9898; 光标:指针; 大纲:无; } .DayPicker导航按钮:悬停{ 不透明度:0.8; } .DayPicker导航按钮--prev{ 左:10px; } .DayPicker导航按钮--下一步{ 右:10px; } .DayPicker导航按钮--已禁用交互{ 显示:无; } .DayPicker标题{ 显示:表格标题; 页边距底部:0; 边框:1px实心#e9e9e9; 填充:0.5em 0.5em; 背景色:#f1f1; 文本对齐:居中; } .DayPicker工作日{ 显示:表头组; 边缘顶部:1米; } .DayPicker工作日Row{ 显示:无; } .DayPicker工作日{ 显示:表格单元格; 填充:0.5em; 颜色:#8B9898; 文本对齐:居中; 字号:0.875em; } .采光器体{ 显示:表格行组; } .DayPicker周{ } .DayPicker日{ 显示:表格单元格; 填充:0.8em; 边框:1px实心#d0d4d9; 垂直对齐:中间对齐; 文本对齐:居中; 光标:指针; 宽度:8.9vw; }Css 如何使react day picker变宽以填充web app移动版中的所有屏幕,css,react-day-picker,Css,React Day Picker,问题是我找不到一个合适的CSS样式来让react day picker的宽度足够填充所有的移动显示 我尝试过定制react day picker提供的css文件,应用了很多样式,但都没有成功 .DayPicker { display: flex; flex-direction: row; justify-content: space-between; font-size: 2.5rem; margin: 0;
我想让日历宽到足以填满我的web应用程序(移动版)中的所有移动屏幕。我不知道怎么做,但我做到了。以下是解决方案:
.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;
}
如果其他人对此感到好奇,这个解决方案之所以有效,是因为有
.DayPicker
和.DayPicker Months
类。只复制这两个就行了。