如何對齊mui中的圖標和文本

Question

我正在嘗試使用 Material UI 實現 AppBar。 我在應用欄中有一些鏈接，它將重定向到不同的頁面。 現在我正在使用帶有文本的圖標，但它們沒有正確對齊，我嘗試用 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="SacolaLogo"
                              src={SacolaLogo}
                         />
                         <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>
     );
}

這就是我的應用欄的樣子

Answer 1

您可以使用帶有 flex 屬性的 Typography，如下所示：

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