[英]React Material-UI breakpoint does not work
Im trying to make a responsive navbar with Material-UI.我试图用 Material-UI 制作一个响应式导航栏。 And I am trying to hide IconButton
between from 960px to 1920px and up.我正在尝试将 IconButton隐藏在 960px 到IconButton
之间。
And show the IconButton
from 0px to 960px.并显示从 0px 到 960px 的IconButton
。
But it works below 960px
但它在960px
以下有效
Here is part of my code of IconButton
and ul
;这是我的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>
In styles.js
file, I applied the following code to IconButton
;在styles.js
文件中,我将以下代码应用于IconButton
;
btnMenu: {
width: '100%',
display: 'none',
[theme.breakpoints.down('sm')]: {
display: 'inline-block',
},
},
But it still shows the IconButton
above ul
, just like in the picture below;但它仍然在ul
上方显示IconButton
,如下图所示;
And here is my github repo;这是我的 github 回购; GitHub-Repo GitHub-回购
The way I solved this is;我解决这个问题的方法是;
I changed MenuIcon
to a fontawesome's bars
icon and applied the .btnMenu
class to the <i>...</i>
tag, and it works well now... Im still not %100 sure what caused IconButton
to not work but changing it to what I said above, it works...我将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.