reactjs 如何在mui中对齐图标和文本

bkhjykvo  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(177)

我试图实现一个应用程序栏使用材料的用户界面。我有一些链接在应用程序栏,这将是重定向到不同的页面。现在我使用的文本图标,螺母他们没有正确对齐,我试图覆盖它与CSS,但它似乎没有工作。
我希望他们对齐,因为它是在注销按钮。提前感谢:)
这是我代码

export default function ButtonAppBar() {
     const navigate = useNavigate();
     const { user, logout } = useAuth();

     const [items, setItems] = useState([]);

     const [loading, setLoading] = useState(true);

     const useStyles = makeStyles((theme) => ({
          navlinks: {
               display: "flex",
          },
          link: {
               textDecoration: "none",
               color: "black",
               fontSize: "15px",
               marginLeft: theme.spacing(1.5),
               "&:hover": {
                    color: "rgb(202, 144, 38)",
                    borderBottom: "1px solid white",
               },
          },
          appbar: {
               // color: '#fff',
               background: '#ffffff',

          },
          icons:{
               marginTop:0
          }

     }))

     useEffect(() => {

          axios.get('https://api.github.com/users/hadley/orgs').then(function (res) {
               console.log(res);
               setItems(res.data);
               console.log(res.data);
               setLoading(false);
          });
     }, []);

     const handleLogout = async () => {
          try {
               console.log(await logout());

               navigate(PATH_AUTH.login, { replace: true });
          } catch (error) {
               console.error(error);
          }
     };

     const handleUserClick = async () => {
          try {
               navigate(PATH_APP.app.user, { replace: true });
          } catch (error) {
               console.error(error);
          }
     };

     // Styles
     const classes = useStyles();


     return (
          <Box sx={{ flexGrow: 1 }}>
               <AppBar position="static" className={classes.appbar} sx={{ backgroundColor: 'white', }}>
                    <Toolbar >
                         <Box
                              component="img"
                              sx={{
                                   width: 120,
                                   justifyItems: 'center',
                              }}
                              alt="Logo"
                              src={Logo}
                         />
                         <Typography variant="h6" textAlign={'end'} component="div" sx={{ flexGrow: 1 }}>
                              <RouterLink to="/" className={classes.link} >
                                   <HomeIcon /> Home
                              </RouterLink>
                              <RouterLink to="/" className={classes.link}>
                                   <DashboardIcon className={classes.icons} /> Dashboard
                              </RouterLink>
                              <RouterLink to="/" className={classes.link}>
                                   <LineAxisIcon />  NFT Transcation
                              </RouterLink>
                              <RouterLink to="/" className={classes.link}>
                              <UserIcon /> Profiles
                              </RouterLink>
                         </Typography>
                         <Divider orientation="vertical" variant="fullWidth" flexItem />
                         <Button type="submit" variant="standard" color="primary" sx={{ color: 'black', fontWeight: 'bold', fontSize:13}} startIcon={<LogoutIcon />} onClick={handleLogout}> Logout </Button>
                    </Toolbar>
               </AppBar>
          </Box>
     );
}

这是我的应用程序栏看起来像

2vuwiymt

2vuwiymt1#

您可以使用带有flex属性的Typography,如下所示:

<RouterLink to="/" className={classes.link} >
    <Typography sx={{ display: "flex", alignItems: "center" }}>
        <HomeIcon/>
        Home
      </Typography>
</RouterLink>

相关问题