ReactJS 中的水平线

Question

我有一个包含两个登录按钮的登录页面。一个用于常规登录，另一个用于使用 google 登录。我正在尝试使用带有“OR”字样的水平线来实现样式。附上图片中的东西。

我的问题是如何将线条放在“或”字的两侧。我觉得 RemoveIcon 不合适？

请在这里查看我的codesandbox 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>

Answer 1

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

Answer 2

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

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    transform: "translate(-70%, -50%)"
  },
  "&:after": {
    transform: "translate(70%, -50%)"
  }
}

<div className={`${classes.center} ${classes.or}`}>OR</div>

ReactJS 中的水平线

Horizontal Line in ReactJS

css

reactjs

material-ui

jss

react-hooks