小编Joe*_*Joe的帖子

我需要创建一个 React 组件，它是一个水平分隔线，中间有一个文本之类的内容。我在网上拥有的所有资源都无法帮助我完成这项工作。我通过创建一个 Divider 组件并将我的文本放在中间来尝试使用 material-ui 分隔符，如下例所示：

<Divider>Or</Divider>

但我收到错误：

hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

我需要在下图中实现这一点：

任何帮助将不胜感激。

这些是我的代码如下：

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Divider from '@material-ui/core/Divider';

 const useStyles = makeStyles((theme) => ({
   root: {
   width: '100%',
   maxWidth: 360,
   backgroundColor: theme.palette.background.paper,
 },
 }));

 export default function ListDividers() {
 const classes = useStyles();

 return (
 <List component="nav" className={classes.root} aria-label="mailbox 
 folders">

  <Divider>Or</Divider>

  </List>
  );
 }