桌面視口(不能在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;
}

如果需要更多信息，請寫在評論中。 如果你知道有人可以幫忙，請投票并分享這個問題 以下是css flex-box的問題。

嘗試以下方法:

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

已更改:

已更改對齊-內容:居中對齊-內容:伸縮-開始；