Css 为什么所有选项卡都没有显示在 React 的 MUI 选项卡组件中

我在创造什么？

• 我正在创建一个可水平滚动的选项卡组件，用于 Select 一个月的日期
• 我用的是MUI 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;
}

• 如果需要更多信息，请在 comments 中写下.
• 如果你认识可以帮助你的人，请投上赞成票并分享这个问题