如何转换:当使用react点击事件时，转换(0%)

Question

我是新的反应，并试图建立移动响应导航条。在移动视图中，我想滑动导航条，我添加了点击事件来改变transform: translateX(0%)，但css似乎不起作用。下面是我的代码。

App.js

import Navbar from "./components/Navbar";
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
export default App;

Navbar.jsx

import '../css/navbar.css'
import {useState} from 'react';
function Navbar() {

const [isShowNavLinks, setIsShowNavLinks] = useState(false);
const handleBurgerClick = () => {
setIsShowNavLinks(!isShowNavLinks)
console.log(isShowNavLinks)
}
return (
<nav className="nav">
<h2 className='logo'>LOGO</h2>
<div className="burger" onClick={handleBurgerClick}>
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</div>
<ul className={isShowNavLinks? 'nav-active' : ''}>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
)
}
export default Navbar;

navbar.css

.nav{
background-color: #16003B;
color: #EEEEEE;
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
}
.logo {
padding: 1%;
}
.nav ul {
width: 60vw;
display: flex;
justify-content: space-around;
list-style: none;
}
ul li {
text-decoration: none;
}
.burger {
display: none;
}
.burger>div {
width: 25px;
height: 2px;
background-color:white;
margin: 4px;
}
@media  screen and (max-width: 500px) {
body{
overflow-x: hidden;
}
.burger {
display: block;
cursor: pointer;
}
.nav ul{
position:absolute;
top:10vh;
right:0px;
width:50%;
height:90vh;
background-color: #16003B;
flex-direction: column;
transform: translateX(100%);
justify-content: space-evenly;
align-items: center;
transition: 0.5s ease-in;
}
.nav-active {
transform: translateX(0);
}

}

当点击。burger in dom时，它显示navactive类，但不应用它的css

点击汉堡时的DOM

Answer 1

只需在navactive类上添加!important属性，因为它将为该类赋予高优先级。要了解更多信息，请访问这个关于css重要属性的链接

添加重要属性后，它将为我工作。去结帐

.nav-active{
transform:translateX(0) !important;
}