React Material-UI 斷點不起作用

Question

我試圖用 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-回購

Answer 1

我解決這個問題的方法是；
我將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>