How to style and position Material UI Link component-CodePudding

I'm trying to style and change position of a Link component, I'm trying to have the Link (Forget Password?) at the right end, but now it's centered as shown in the image below

Also I want to change the color of it, I tried color="black" but didn't work

I'm using grids trying to have the texts apart from each other.

The Code

{/* Password */}
          <Grid container mt={4}>

            <Grid item xs={6} justify={"flex-start"}>
            <Typography 
            variant="h9" 
            gutterBottom 
            component="div"
            style={{ fontWeight: "bold", textAlign: "left"}} 
            >
            Password
            </Typography>
            </Grid>

            <Grid item xs={6} justify={"flex-end"}>
          <Typography
          variant="body2"
          gutterBottom
          component={Link}
          // align="right"
          to="/register"
          >
            {/* <Link to="/register">Forget Password?</Link> */}
            Forget Password?
          </Typography>
          
          </Grid>
          

          </Grid>

CodePudding user response：

If "black" isn't defined in your theme, that won't work. color="primary" should work, but if you can also define black as a color in your theme.

Alternatively, if you want only this link to be black, you can add the attribute sx={{ color: 'black' }} to <Link> and that should work.

If it's not necessary to do so, I wouldn't wrap the link in a typography; just apply all the styles directly to link, as link already uses a typography element under the hood.

CodePudding user response：

Try this to right-align your password link:

<Grid item xs={6}>
  <Box display="flex" justifyContent="flex-end">
    <Typography
      variant="body2"
      gutterBottom
      component={Link}
      // align="right"
      to="/register"
    >
      {/* <Link to="/register">Forget Password?</Link> */}
        Forget Password?
    </Typography>
  </Box>
</Grid>