如何在桌面端隐藏移动端底部导航栏？Bootstrap类失效求助

你遇到的问题是Bootstrap隐藏类未生效，原因是className里的类名多了前缀.——React的className属性中不需要加.，直接写类名即可，多余的点会被识别为类名的一部分，导致Bootstrap的样式无法匹配。

另外，Bootstrap的响应式隐藏类可以简化：如果要在平板（md）及以上的桌面端都隐藏，只需要d-md-none一个类就足够，它会自动覆盖lg、xl、xxl等更大的断点，无需重复添加多个类。

修正后的代码如下：

return (
  <div className="container-fluid bottom-navbar d-md-none">
    <Box sx={{ width:600, height:500 }}>
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      >
        <Link to="/profile" className="nav-link">
          <BottomNavigationAction label="Acount" className="bottom-icon" icon={<AccountCircleIcon />} />
       </Link>

       <Link to="/WishList" className="nav-link">
          <BottomNavigationAction label="Wishlist" className="bottom-icon" icon={<FavoriteIcon />} />
       </Link>

       <Link to="/TrackOrder" className="nav-link">
       <BottomNavigationAction label="Category" className="bottom-icon" icon={<CategoryIcon />} />
       </Link>

       <Link to="/TrackOrder" className="nav-link">
       <BottomNavigationAction label="Track Order" className="bottom-icon" icon={<LocalShippingIcon />} />
       </Link>

       <Link to="/TrackOrder" className="nav-link">
       <BottomNavigationAction label="Search product" className="bottom-icon" icon={<FindInPageIcon />} />
       </Link>
       
       
      </BottomNavigation>
    </Box>
  </div>
);
}

export default BottomNavigationBar;

内容的提问来源于stack exchange，提问作者Hlobi Lukhele