Horizontal Line in ReactJS

Question

I have a login page that has two login buttons. One for regular login and the other for login with google. I'm trying to achieve a style with horizontal line with the "OR" word. Something in the picture attached.

My problem how can i put the lines on the sides of the "OR" word. I don't think the RemoveIcon suits it?

Pls check my codesandbox here 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

You can use pseudo elements to customize the appearance of the lines

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>

Answer 2

You have to only add alignItems: "center" to the "center" class