如何在Chakra UI中设置默认容器尺寸与断点关联？

你可以通过两种方式实现Container组件默认跟随断点自适应宽度，无需重复设置maxW属性：

方法一：扩展Chakra主题设置全局默认值 #

直接在主题扩展中修改Container组件的默认属性，这是Chakra UI推荐的全局配置方式。

修改你的main.tsx，在extendTheme中添加components配置：

// main.tsx
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

// Extend theme
const breakpoints = {
    sm: "320px",
    md: "768px",
    lg: "960px",
    xl: "1200px",
    "2xl": "1536px",
};

const theme = extendTheme({
  breakpoints,
  components: {
    Container: {
      defaultProps: {
        // 配置响应式最大宽度，对应你的自定义断点
        maxW: {
          sm: "100%", // 小屏占满宽度
          md: "768px",
          lg: "960px",
          xl: "1200px",
          "2xl": "1536px",
        },
      },
    },
  },
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <App />
        </ChakraProvider>
    </React.StrictMode>
);

配置完成后，所有<Container>组件会自动应用这个响应式宽度规则，若某处需要特殊宽度，仍可手动传入maxW属性覆盖默认值。

方法二：封装自定义Container组件 #

如果不想修改全局主题，或者需要更灵活的局部自定义，可以封装一个自己的Container组件：

新建CustomContainer.tsx文件：

// CustomContainer.tsx
import { Container, ContainerProps } from '@chakra-ui/react';

const CustomContainer = (props: ContainerProps) => {
  // 预设响应式宽度，同时允许传入props覆盖默认值
  return (
    <Container
      maxW={{
        sm: "100%",
        md: "768px",
        lg: "960px",
        xl: "1200px",
        "2xl": "1536px",
      }}
      {...props}
    />
  );
};

export default CustomContainer;

之后在项目中导入并使用这个自定义组件即可：

// App.tsx
import CustomContainer from './CustomContainer';

const App = () => {
    return (
        <CustomContainer>
            <h1>Hello project</h1>
        </CustomContainer>
    );
};

export default App;

补充说明 #

• 你也可以使用Chakra预设的容器尺寸（如container.sm、container.xl）替代具体像素值，只要确保和你的自定义断点匹配即可。
• 两种方式都能实现"一次配置，全局复用"的效果，可根据项目需求选择。

内容的提问来源于stack exchange，提问作者Shams Sujon