![](/img/trans.png)
[英]React Scroll and Material-UI button active link does not work
[英]React Material-UI breakpoint does not work
我试图用 Material-UI 制作一个响应式导航栏。 我正在尝试将 IconButton隐藏在 960px 到IconButton
之间。
并显示从 0px 到 960px 的IconButton
。
但它在960px
以下有效
这是我的IconButton
和ul
代码的一部分;
<div className={classes.right}>
<IconButton
edge='end'
className={classes.btnMenu}
size='medium'
onClick={(e) => setShowMenu(!showMenu)}
>
<MenuIcon
className={classes.btnMenuMenu}
size='medium'
></MenuIcon>
</IconButton>
<ul
className={`${classes.list} ${
showMenu ? classes.showList : classes.removeList
} `}
>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Home
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
About
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Portfolio
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Contact
</a>
</li>
</ul>
</div>
在styles.js
文件中,我将以下代码应用于IconButton
;
btnMenu: {
width: '100%',
display: 'none',
[theme.breakpoints.down('sm')]: {
display: 'inline-block',
},
},
但它仍然在ul
上方显示IconButton
,如下图所示;
这是我的 github 回购; GitHub-回购
我解决这个问题的方法是;
我将MenuIcon
更改为 fontawesome 的bars
图标,并将.btnMenu
class 应用于<i>...</i>
标记,它现在运行良好......我仍然不确定是什么导致IconButton
无法工作但正在改变按照我上面说的,它有效...
<div className={classes.right}>
<Button onClick={(e) => setShowMenu(!showMenu)}>
<i className={` ${classes.btnMenu} fas fa-bars`}></i>
</Button>
<ul
className={`${classes.list} ${classes.list2} ${
showMenu ? classes.showList : classes.removeList
} `}
>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Home
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
About
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Portfolio
</a>
</li>
<li className={classes.li}>
<a href='#!' className={classes.navLink}>
Contact
</a>
</li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.