如何使 Chakra UI 框/弹性项目占据 100% 的宽度

问题描述

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

现在的样子：

它应该是什么样子：

代码（不工作的代码部分是第一个三元选项）：

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 组件中，并且它们工作正常，只是这个导致了问题... 部分组件代码：

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>

解决方法

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

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