我正在构建一个简单的react应用程序,并尝试使用该语句更改div的名称-
<div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} id="tab" ></div>
但是当尝试这样做时,它的css部分消失了。页面的其余部分工作正常,因此与css文件的链接没有问题。当我尝试只使用id名而不是类名时,样式工作正常。只有在css中使用类名时,样式才会消失,并且在使用inspect时,它们甚至不会显示在开发人员工具上。类名确实出现在开发人员工具的html部分的class属性中,但是css属性没有。
我对条件语句使用了一个简单的usestate钩子-
const [page, setPage] = useState([{
login: true,
signUp: false
}])
这是css-
# tab .changeTab .leftSide{
position: absolute;
height: 100%;
width: 50%;
left: 0;
background: -webkit-linear-gradient(right,#4361ee,#4cc9f0);
transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
border-radius: 5px;
}
# tab .changeTab .rightSide{
position: absolute;
height: 100%;
width: 50%;
left: 0;
background: red;
margin-left: -50%;
transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
border-radius: 5px;
}
我是新来的React,所以任何帮助都将非常感谢
1条答案
按热度按时间nfzehxib1#
css规范中的逻辑似乎有缺陷。
我相信您正在尝试将样式应用于具有id的元素
tab
班级呢changeTab
还有这个班leftSide
或rightSide
.现在,您告诉css查找父id的嵌套类
tab
.这意味着您的css正在尝试查找id为的子级
tab
那是一门课changeTab
然后,它再次使用类查找该元素的子元素leftSide
或rightSide
.您的css应该如下所示:
请注意我是如何删除css中的间距的。这告诉css查找必须具有id的元素
tab
还有班级changeTab
或者leftSide
或rightSide
.