I have successfully centered the Hello There button. But my problem is, a little bit of lines are appearing on it. I could put a background-color: white to solve it, but is there a better way to do this and a better coding? Like not using position: absolute etc....?

CLICK HERE FOR CODESANDBOX

 <Stack
    alignItems={"center"}
    sx={{
      marginTop: 2,
      position: "absolute",
      display: "flex",
      left: 0,
      right: 0
    }}
  >
    <Button variant="outlined">Hello There</Button>
  </Stack>

CodePudding user response：

I think your question should be more clear but here is the answer what I am thinking.

<Stack
        sx={{
          marginTop: 2,
          position: "absolute",
          width: "100%"
        }}
      >
        <Button
          variant="outlined"
          sx={{
            margin: "0px auto"
          }}
        >
          Hello There
        </Button>

CodePudding user response：

The Button variant you are using is the varian="outlined" which has a transparent background. So when is positioned above the dashed border they are shown behind it. In this case if you wan to keep this style of Button you have to add a background-colour of white to it. Another option would be to use the contained variant like below but this would change the style of the button.

<Button variant="contained">
  Hello there
</Button>