在AppBar中将NavLink移到右侧可以通过以下步骤实现:
justifyContent: 'space-between'
,这样可以将内容分散对齐,将NavLink移到右侧。marginLeft: 'auto'
,这样可以将NavLink向右移动。下面是一个示例代码:
import React from 'react';
import { AppBar, Toolbar, Typography, Button } from '@material-ui/core';
import { NavLink } from 'react-router-dom';
const styles = {
flexContainer: {
display: 'flex',
justifyContent: 'space-between',
},
navLink: {
marginLeft: 'auto',
},
};
const MyAppBar = () => {
return (
<AppBar position="static">
<Toolbar style={styles.flexContainer}>
<Typography variant="h6">My App</Typography>
<NavLink to="/" exact activeClassName="active" style={styles.navLink}>
<Button color="inherit">Home</Button>
</NavLink>
<NavLink to="/about" activeClassName="active" style={styles.navLink}>
<Button color="inherit">About</Button>
</NavLink>
<NavLink to="/contact" activeClassName="active" style={styles.navLink}>
<Button color="inherit">Contact</Button>
</NavLink>
</Toolbar>
</AppBar>
);
};
export default MyAppBar;
在上面的代码中,我们使用了Material-UI库的AppBar、Toolbar、Typography和Button组件来创建一个简单的导航栏。通过设置justifyContent: 'space-between'
将内容分散对齐,然后给NavLink添加了一个CSS类navLink
,并设置marginLeft: 'auto'
将其向右移动。
这样,我们就实现了在AppBar中将NavLink移到右侧的效果。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云负载均衡(CLB)。
领取专属 10元无门槛券
手把手带您无忧上云