0

我遇到了 Chakra UI 框或弹性项目的问题（不确定是哪一个导致了问题）。我不能让它们在平板电脑和手机上占据 100% 的宽度。我设法使它工作的唯一方法是定义大众宽度，但这并不是在所有设备上都响应。

现在的样子： 在此处输入图像描述

它应该看起来如何： 在此处输入图像描述 代码（不工作的代码部分是第一个三元选项）：

enter code here


import React from 'react'
import { Box, Flex, useMediaQuery } from '@chakra-ui/react'
import Section from 'components/section/Section'
import HoursCellList from 'components/schedule/hours/HoursCellList'
import DaysCellList from './days/DaysCellList'
import EventsComponent from 'components/schedule/events/EventsComponent'
import MobileDaysCellList from './days/MobileDaysCellList'
import MobileEventsFlex from 'components/schedule/events/MobileEventFlex'
interface Props {}

const ScheduleComponent = (props: Props) => {
  
    const [isSmallScreen] = useMediaQuery('(max-width: 1350px)')



    const [mobileClickedDay, setMobileClickedDay] = useState<number>(0)
    return (
        <Section isGray heading="Schedule" id="schedule">
            <Box py={['2', '4', '8']}>
                {isSmallScreen ? (
                    <Flex justifyItems="stretch">
                        <Box>
                            <HoursCellList isMobile={isSmallScreen} />
                        </Box>
                        <Flex flexDirection="column" bg="#fff" flex="1">
                            <MobileDaysCellList clickedDay={mobileClickedDay} onClick={setMobileClickedDay} />
                            <MobileEventsFlex clickedDay={mobileClickedDay} />
                        </Flex>
                    </Flex>
                ) : (
                    <>
                        <HoursCellList isMobile={isSmallScreen} />
                        <Flex w="1200px" bg="#fff">
                            <DaysCellList />
                            <EventsComponent />
                        </Flex>
                    </>
                )}
            </Box>
        </Section>
    )
}

export default ScheduleComponent
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

所有其他页面组件都在 Section 组件中作为子组件，它们工作正常，只是这个导致了问题...... Section 组件代码：

import React from 'react'
import SectionHeading from './SectionHeading'
import { Box, Center, BoxProps } from '@chakra-ui/react'

interface Props {
    heading?: string
    subHeading?: string
    isGray?: boolean
    id?: string
    children: React.ReactNode
}
type SectionProps = Props & BoxProps
const Section = ({ children, heading = '', subHeading = '', isGray = false, id = '', ...props }: SectionProps) => {
    return (
        <Center>
            <Box
                bg={isGray ? 'primaryBg' : 'secondaryBg'}
                color="primaryText"
                zIndex="0"
                w="100%"
                pt={['47px', '56px', '70px']}
                pb={['12', '16', '24']}
                minHeight="100vh"
                d="flex"
                alignItems="center"
                {...props}
                id={id}
            >
                <Box maxWidth="1366px" mx="auto" px={['15px', '43px', '83px']}>
                    <Box>
                        <SectionHeading heading={heading} subHeading={subHeading} />
                        {children}
                    </Box>
                </Box>
            </Box>
        </Center>
    )
}

export default Section
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

4

1 回答 1

1

我不敢相信这个问题是如此愚蠢的事情哈哈，

通过在 maxWidth='1366px' 旁边的 Section 组件中添加 w='100%' 来解决问题

于 2021-07-14T07:07:35.427 回答