我需要创建一个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>
);
}
答案 0 :(得分:5)
使用Material 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>
答案 1 :(得分:4)
这是您可以做的一个自定义示例:repro on stackblitz
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
const App = () => {
return <Divider>Or</Divider>;
};
const Divider = ({ children }) => {
return (
<div className="container">
<div className="border" />
<span className="content">
{children}
</span>
<div className="border" />
</div>
);
};
render(<App />, document.getElementById("root"));
和CSS:
.container{
display: flex;
align-items: center;
}
.border{
border-bottom: 1px solid black;
width: 100%;
}
.content {
padding: 0 10px 0 10px;
}
答案 2 :(得分:1)
你可能想要不同的间距
<Divider spacing={1}>Hello World</Divider>
或
<Divider spacing={2}>Hello World</Divider>
对于可配置的 spacing
,此处为 Github Gist
如果您愿意,也可以在代码和框中使用 playground
答案 3 :(得分:1)
如果发生这种情况,将 width: 100% 更改为 flexGrow: 1 应该可以解决:
border: {
borderBottom: "2px solid lightgray",
flexGrow: 1,
}
答案 4 :(得分:0)
不幸的是,目前,在 MUI 中具有带有文本的 Divider
仅在 v5 中可用,该版本仍处于 alpha 阶段。如果您想尝试,您可以下载 alpha 包,但请注意它仍然非常不稳定,可能需要进行大量更改才能迁移到 v5,这不是很值得。
GitHub 讨论:https://github.com/mui-org/material-ui/issues/24036