我试图实现一个应用程序栏使用材料的用户界面。我有一些链接在应用程序栏,这将是重定向到不同的页面。现在我使用的文本图标,螺母他们没有正确对齐,我试图覆盖它与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>
);
}
这是我的应用程序栏看起来像
1条答案
按热度按时间2vuwiymt1#
您可以使用带有flex属性的Typography,如下所示: