React MUI Divider Display

React MUI 是一个UI库，提供了丰富的组件，为我们的生产就绪组件带来了自己的设计系统。MUI是一个用户界面库，提供了预定义和可定制的React组件，用于更快、更简单的Web开发，这些Material-UI组件基于谷歌的Material Design。

React MUI分隔线展示 是一条细线，用于分隔不同的组件，并在列表和网页布局中用于分组内容。

分隔线变体：

列表分隔线： 默认情况下，分隔线渲染为

。我们还可以通过ListItem组件上的 divider 属性来保存渲染此DOM元素。
* HTML5规范： 确保Divider被渲染为

元素，以匹配HTML5规范。
* 缩进分隔线： 在这种情况下，分隔线与父元素之间有一定的距离。
* 子标题分隔线： 在这种情况下，子标题分隔线组件在主分隔线之后渲染。
* 中间分隔线： 在这种情况下，分隔线组件在中间渲染。
* 带文本的分隔线： 在这种情况下，分隔线与文本内容一起渲染。
* 垂直分隔线： 这里的分隔线是垂直渲染的。它通过 orientation 属性进行渲染。它有两个变种： 垂直与中间变体 和 带文本的垂直 。
* API： 使用<Divider/> API来渲染分隔线组件。

语法：

<Divider />

创建React项目：

步骤1： 创建一个React应用程序，你需要通过npm命令安装React模块。

npm create-react-app project name

步骤2： 创建React项目后，进入文件夹执行不同的操作。

cd project name

步骤3： 创建完ReactJS应用程序后，使用以下命令安装所需的模块：

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

项目结构：

React MUI Divider Display

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

示例1： 下面的示例展示了在列表组中使用React MUI的分割线。

import { Divider, List, ListItemText } from "@mui/material"; 
import React from "react"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: 'green' }}> 
                    GeeksforGeeks</h1> 
                <h2>React MUI Divider Display</h2> 
            </div> 
            <div> 
                <List sx={{ 
                    bgcolor: '#1AB519', 
                    color: 'white',  
                    padding: 2,  
                    width: '10%'
                }}> 
                    <ListItemText>Array</ListItemText> 
                    <Divider sx={{ bgcolor: 'white' }} /> 
                    <ListItemText>Stack</ListItemText> 
                    <Divider sx={{ bgcolor: 'white' }} /> 
                    <ListItemText>Queue</ListItemText> 
                    <Divider sx={{ bgcolor: 'white' }} /> 
                    <ListItemText>Linked List</ListItemText> 
                </List> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI Divider Display

示例2： 下面的示例演示了带有文本的React MUI分隔线。

import { Divider, List } from "@mui/material"; 
import React from "react"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: 'green' }}> 
                    GeeksforGeeks</h1> 
                <h2>React MUI Divider Display</h2> 
            </div> 
            <div> 
                <List> 
                    <Divider sx={{ color: '#1AB519' }} 
                        textAlign="left">Arrays</Divider> 
                    <Divider sx={{ color: '#1AB519' }} 
                        textAlign="center">Stack</Divider> 
                    <Divider sx={{ color: '#1AB519' }} 
                        textAlign="right">Queue</Divider> 
                </List> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

React MUI Divider Display