我在创造什么？

• 我正在创建一个水平滚动选项卡组件，用于选择一个月的日期
• 我用Material UI library

问题

• 14th Sun之前的日期不在网站中显示。（如下图所示）
• 第一个标签应该是每月的第一天。它是14th Sun
• 在浏览器元素选项卡中，所有选项卡都在那里。但它们并没有出现在屏幕上

移动的视口（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;
}

• 如果需要更多信息，请在评论中写下。
• 如果你知道谁能帮上忙，请投赞成票并分享这个问题