我需要创建一个 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>
);
}
使用材质 UI。
import React from "react";
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
container: {
display: "flex",
alignItems: "center"
},
border: {
borderBottom: "2px solid lightgray",
width: "100%"
},
content: {
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
paddingRight: theme.spacing(2),
paddingLeft: theme.spacing(2),
fontWeight: 500,
fontSize: 22,
color: "lightgray"
}
}));
const DividerWithText = ({ children }) => {
const classes = useStyles();
return (
<div className={classes.container}>
<div className={classes.border} />
<span className={classes.content}>{children}</span>
<div className={classes.border} />
</div>
);
};
export default DividerWithText;
您可以像下面这样导入并使用它
<DividerWithText>Or</DividerWithText>
Result
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)