React Chakra UI 布局自动居中，无法设置宽度100%问题求助

你遇到的问题是Chakra UI的Container组件默认样式导致的——这个组件本身就是为居中内容容器设计的，默认会设置随断点变化的max-width以及margin-left: auto; margin-right: auto，所以即便你添加自定义宽度样式，也会被它的默认margin和max-width限制，无法占满全屏宽度。

有两种实用解决方式，可根据需求选择：

方案1：替换Container为Box组件（推荐） #

如果不需要Container的居中特性，直接用Chakra的基础容器组件Box替代Container，它没有默认的margin和max-width限制，能直接占满父容器宽度：

修改RootLayout.tsx：

import React from "react";
// 替换Container为Box
import { Box, Image, Flex } from "@chakra-ui/react";
import background from "../public/img/town.png";

import Main from "../components/Main";

export default function test() {
  const mainContainerCss = {
    background:
      "linear-gradient(180deg, rgba(0,212,255,0.3) 62%, rgba(150,75,0,1) 100%)",
    minHeight: "100vh",
    position: "relative",
    h: "100%",
    w: "100%",
    m: 0, // 用Chakra简写属性替代!important
    p: 0
  };

  const backgroundImageCss = {
    position: "absolute",
    width: "100%",
    bottom: "0",
  };
  return (
    <Box as="main" sx={mainContainerCss}>
      <Image sx={backgroundImageCss} src={background} alt="Pollygon" />
      <Flex flexDirection="column" h="100%">
        <Main />
      </Flex>
    </Box>
  );
}

方案2：保留Container，覆盖默认props #

如果一定要用Container组件，直接给它添加maxW="100%"（取消最大宽度限制）和mx="0"（取消左右auto margin）属性，即可覆盖默认样式：

修改RootLayout.tsx中的Container部分：

<Container 
  as="main" 
  sx={mainContainerCss}
  maxW="100%" // 取消默认max-width
  mx="0"      // 取消左右auto margin
>
  <Image sx={backgroundImageCss} src={background} alt="Pollygon" />
  <Flex flexDirection="column" h="100%">
    <Main />
  </Flex>
</Container>

Chakra UI的组件样式优先级为：组件props > sx属性 > 全局样式，直接用组件props修改比!important更符合框架设计规范，代码也更简洁。

内容的提问来源于stack exchange，提问作者Alper Uluses