React中Material UI标签组件部分标签不显示问题排查

开发内容 #

• 正在开发一个可横向滚动的月份日期选择标签组件
• 使用Material UI库

问题 #

• 页面中无法显示14th Sun（14日周日）之前的日期（如下方截图所示）
• 首个标签应为当月1日，实际显示为14th Sun（14日周日）
• 浏览器元素面板中存在所有标签，但页面上不可见

移动端视口（无法滚动到14日之前；起始为14日） #

桌面端视口（无法滚动到7日之前） #

元素面板 #

疑似问题代码片段 #

export default function DayScrollView() {
  const [activeDate, setActiveDate] = useContext(dateContext)
  const [dates, setDates] = useState(getDatesInMonth(activeDate))
  return (
    <Box sx={
      {
        overflowX: 'scroll',
        scrollbarWidth: 'none',
        '-ms-overflow-style': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      }
    }>
      <Tabs defaultValue={0}>
        <StyledTabsList>
          {dates.map((date, index) => {
            console.log(`${date.getDate()} ${date.toLocaleString('default', { weekday: 'short' })}`)
            return (
              <StyledTab key={date.toDateString()} value={date.toDateString()} onClick={() => setActiveDate(date)}>
                <Typography variant='subtitle1'>{date.toLocaleString('default', { weekday: 'short' })}</Typography>
                <Typography variant='h5'>{date.getDate()}</Typography>
              </StyledTab>
            )
          })}
        </StyledTabsList>
      </Tabs>
      <Box mr={10} sx={{ width: 20 }} />
    </Box>
  );
}

完整组件代码 #

import { useContext, useState } from 'react';
import * as React from 'react';
import { styled } from '@mui/system';
import Tabs from '@mui/base/Tabs';
import TabsList from '@mui/base/TabsList';
import TabPanel from '@mui/base/TabPanel';
import { buttonClasses } from '@mui/base/Button';
import Tab, { tabClasses } from '@mui/base/Tab';
import { Box, Typography } from '@mui/material';
import getDatesInMonth from '@/utils/getDatesInMonth';
import { dateContext } from '@/pages/mob';

export default function DayScrollView() {
  const [activeDate, setActiveDate] = useContext(dateContext)
  const [dates, setDates] = useState(getDatesInMonth(activeDate))
  return (
    <Box sx={
      {
        overflowX: 'scroll',
        scrollbarWidth: 'none',
        '-ms-overflow-style': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      }
    }>
      <Tabs defaultValue={0}>
        <StyledTabsList>
          {dates.map((date, index) => {
            console.log(date)
            return (
              <StyledTab key={index} value={index} onClick={() => setActiveDate(date)}>
                <Typography variant='subtitle1'>{date.toLocaleString('default', { weekday: 'short' })}</Typography>
                <Typography variant='h5'>{date.getDate()}</Typography>
              </StyledTab>
            )
          })}
        </StyledTabsList>
      </Tabs>
      <Box mr={10} sx={{ width: 20 }} />
    </Box>
  );
}

const StyledTab = styled(Tab)`
.... some css styles
`;

const StyledTabPanel = styled(TabPanel)(
  ({ theme }) => `
  width: 100%;
  ... more styles
  `,
);

const StyledTabsList = styled(TabsList)(
  ({ theme }) => `
  padding-right: 1rem;
  background: transparent;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  align-content: space-between;
`,
);

getDatesInMonth() 工具函数代码 #

function getDatesInMonth(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const numDays = new Date(year, month + 1, 0).getDate();
    const dates = [];
    for (let i = 1; i <= numDays; i++) {
        dates.push(new Date(year, month, i));
    }
    return dates;
}

• 若需更多信息，请在评论中告知。
• 若您认识能提供帮助的人，欢迎点赞并分享此问题。

内容的提问来源于stack exchange，提问作者Curious Learner