Div React-burger-menu 问题

Question

我正在尝试基本上使用 React-burger-menu 中的所有选项，但出于某种原因，我似乎无法正确设置样式。我的索引页面以某种方式包含在我的导航 div 中，即使切换到其他路线，它仍然是一样的。我确定这很简单。这是我正在谈论的图像：

关于 CSS 我已经尝试了所有我能想到的方法，但我无法让它正常工作。这是 Nav 所在的代码：

   render() {
     return (
       <div>
        <Background />
         <Menu>
           <nav className="stroke">
            <ul>
             <div className="menu bm-menu">
              <li>
               <NavLink className="menu-item bm-item" to="/">
                Home
               </NavLink>
              </li>
              <li>
               <NavLink className="menu-item bm-item" to="/portfolio">
                Portfolio
               </NavLink>
              </li>
              <li>
              <NavLink className="menu-item bm-item" to="/contact">
                Contact
              </NavLink>
              </li>
            </div>
          </ul>
        </nav>
      <Route exact path="/" component={Index} />
      <Route path="/portfolio" component={Portfolio} />
      <Route path="/contact" component={Contact} />
      </Menu>
    </div>
   );
  }
 }

这是我的 CSS:

   nav {
     z-index: 1;
     width: 100%;
     align-items: center;
     max-height: 3em;
   }

 .menu {
    list-style-type: none;
    justify-content: flex-end;
    border-bottom: 2px solid transparent;
   background: transparent;
 }

 .menu-item {
   margin-right: 1em;
   color: aliceblue;
   font-size: 25px;
   font-weight: bold;
   font-family: 'Raleway', sans-serif;
   text-decoration: none;
 }

.menu-item:hover {
 text-decoration-color: aliceblue;
  }

 nav.stroke ul li a,
 nav.fill ul li a {
position: relative;
 }    

 nav.stroke ul li a:after,
  nav.fill ul li a:after {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: 0%;
 content: '.';
 color: transparent;
 background: #aaa;
 height: 1px;
}

nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
   transition: all 0.5s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}

 nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
 }

nav.fill ul li a:hover:after {
 z-index: -10;
 animation: fill .1s forwards;
 -webkit-animation: fill .1s forwards;
 -moz-animation: fill .1s forwards;
 opacity: 1;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
 }
 .bm-burger-bars {
   background: #373a47;
  }
 .bm-menu {
  background: #797c88;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
  max-width: 80%;
  }
 .bm-morph-shape {
  fill: #797c88;
  max-width: 80%;
 }
 .bm-item {
  display: inline-block;
  margin-bottom: 2%;
  }
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
 }

还有一些问题，如 scaleRotate 等动画不会将 canvas 推出 (particle.js)。我不确定这是否可以完成，但值得一试。我为问了一个愚蠢的问题而道歉。我通常不会问 CSS，但我被难住了。

谢谢

Answer 1

原来这是实际库本身的问题。在 Github 中发布了一个问题并转到了另一个库。

Div React-burger-menu 问题

Div issues with React-burger-menu

javascript

css

react-router-dom