ReactJS中的水平线

问题描述

我有一个具有两个登录按钮的登录页面。一个用于常规登录，另一个用于通过Google登录。我正在尝试使用带有“或”字的水平线来实现样式。附件中的图片。

我的问题是如何将线条放在“或”字的两边。我认为RemoveIcon不适合吗？

请在此处CLICK HERE

检查我的代码和框

<div className={classes.center}>
            <Button
              type="submit"
              color="primary"
              variant="contained"
              className={classes.mb2}
            >
              Sign in
            </Button>
          </div>
          <div className={classes.center}>
            <RemoveIcon />
            OR
            <RemoveIcon />{" "}
          </div>
          <div className={classes.center}>
            <Button type="button" variant="contained">
              Sign in with Google
            </Button>
          </div>

解决方法

您可以使用伪元素来自定义线条的外观

11.5.0

,

您只需将alignItems: "center"添加到“中心”类