2

问题是我找不到合适的 CSS 样式方法来使 react-day-picker 足够宽以填充所有移动显示。

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

    .DayPicker {
        显示：弯曲；
        弹性方向：行；
        justify-content: 之间的空格；
        字体大小：2.5rem；
        边距：0；
        边距顶部：2rem；
    }

    .DayPicker 包装器 {
        位置：相对；
        弹性方向：行；
        用户选择：无；
        宽度：100%；
    }

    .DayPicker-月 {
        显示：弯曲；
        弹性包装：换行；
        弹性方向：列；
    }

    .DayPicker-月 {
        显示：表格；
        边距：0；
        边距顶部：自动；
        边框间距：0；
        边框折叠：折叠；
        用户选择：无；
    }

    .DayPicker-NavBar {
        位置：相对；
    }

    .DayPicker-NavButton {
        位置：绝对；
        顶部：1.4rem；
        边距顶部：2px；
        宽度：1.25em；
        高度：1.25em；
        背景位置：中心；
        背景大小：60%；
        背景重复：不重复；
        颜色：#8B9898；
        光标：指针；
        大纲：无；
    }

    .DayPicker-NavButton:hover {
        不透明度：0.8；
    }

    .DayPicker-NavButton--prev {
        左：10px；
    }

    .DayPicker-NavButton--next {
        右：10px；
    }

    .DayPicker-NavButton--interactionDisabled {
        显示：无；
    }

    .DayPicker-Caption {
        显示：表格标题；
        边距底部：0；
        边框：1px 实心#e9e9e9；
        填充：0.5em 0.5em；
        背景颜色：#f1f1f1；
        文本对齐：居中；
    }

    .DayPicker-工作日{
        显示：表头组；
        上边距：1em；
    }

    .DayPicker-WeekdaysRow {
        显示：无；
    }

    .DayPicker-工作日 {
        显示：表格单元格；
        填充：0.5em；
        颜色：#8B9898；
        文本对齐：居中；
        字体大小：0.875em；
    }


    .DayPicker-Body {
        显示：表格行组；
    }

    .DayPicker-周 {
    }

    .DayPicker-Day {
        显示：表格单元格；
        填充：0.8em；
        边框：1px 实心#d0d4d9；
        垂直对齐：中间；
        文本对齐：居中；
        光标：指针；
        宽度：8.9vw；
    }

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

4

1 回答 1

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;
}
于 2019-01-13T17:18:27.427 回答