如何在 ReactJS 中使用 Container 组件？

容器组件在网页上创建一个类似盒子的容器。此外，我们可以根据内部内容的高度设置容器的高度。此外，我们还可以为 Container 组件设置可变宽度。

基本上，我们可以使用 Container 创建一个矩形框，并在其中添加一些 HTML 内容。

用户应使用以下命令在 React 项目中安装 Material UI。

npm install @mui/material @emotion/react @emotion/styled

语法

用户可以按照以下语法使用 Material UI 的 Cotnainer 组件。

<Container maxWidth="xs">
   // content of the container
</Container>

在以上语法中，我们可以在 Container 组件内部添加网页的 HTML 内容。

示例

在下面的示例中，我们使用了 Container 组件来创建一个容器。此外，我们还将“maxWidth”作为容器组件的 prop 传递，并将其值设置为“xs”，表示断点。

在输出中，用户可以观察到它根据设备的宽度设置容器的宽度。这意味着宽度是流动的，我们可以使用它来制作响应式设计。

import React from "react";
import Container from "@mui/material/Container";
const App = () => {
   return (
      <div>
         <h4>
            {" "}
            Using the <i> Container </i> Component of the Material UI to create a container in the React application {" "}
         </h4>
         <Container maxWidth = "xs">
            <div style = {{ backgroundColor: "lightgreen", height: "30rem" }}> Hello </div>
         </Container>
      </div>
   );
};
export default App;

输出

示例

在下面的示例中，我们在单个 div 元素中添加了两个容器。此外，我们还将 div 元素的 display 设置为 flex，因此两个容器并排显示。

此外，我们在两个容器中添加了一些文本内容并设置了固定宽度。

import React from "react";
import Container from "@mui/material/Container"; 
const App = () => {
   return (
      <div>
         <h4>
            {" "}
            Using the <i> Container </i> Component of the Material UI to create a container in the React application {" "} </h4>
            <div style = {{display: "flex", justifyContent: "space-around"}}>
               <Container fixed>
                  <div style = {{ backgroundColor: "pink", height: "30rem", width: "90%" }}>
                     {" "}
                     This is a content of the container div. {" "}
                  </div>
               </Container>
               <Container fixed>
                  <div style = {{ backgroundColor: "pink", height: "30rem", width: "90%" }}>
                     {" "}
                     This is a content of the container div. {" "}
                  </div>
               </Container>
            </div>
      </div>
   );
};
export default App;

输出

用户学习了如何在 ReactJS 中使用 Material UI 的 Container 组件。我们已经看到了使用 Container 组件的两个不同的示例。在第一个示例中，Container 组件是流动的，而在第二个示例中，它是固定的。

更新于： 2023-03-09

3K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告