我正在尝试创建一个React应用程序与脉轮用户界面，但当我添加脉轮项目的中心所有布局。我不能使宽度属性100。脉轮是打破了一些东西或我的配置是错误的。
index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { ChakraProvider } from "@chakra-ui/react";
const root = ReactDOM.createRoot(
 document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
  <ChakraProvider>
    <App />
  </ChakraProvider>
</React.StrictMode>
);

App.tsx

import * as React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./layout/RootLayout";

const router = createBrowserRouter([
 {
   path: "/",
   element: <RootLayout />,
 },
]);

function App() {
  return <RouterProvider router={router} />;
  }

 export default App;

tsx（这是我的容器组件。我为粉碎脉轮容器css添加了一些css。）

import React from "react";
import { Container, 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%",
    width: "100%", // I add for fix the problem
    margin: "0 !important", // I add for fix the problem
    padding: "0 !important", // I add for fix the problem
    minWidth: "100%" // I add for fix the problem
  };

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

第一个容器通过脉轮有很多余量。