为什么在尝试更改react js中的类名时css样式消失了？

rdrgkggo 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(300)

我正在构建一个简单的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，所以任何帮助都将非常感谢

JavaScript Html reactjs css

来源：https://stackoverflow.com/questions/68334349/why-do-the-css-styles-disappear-when-trying-to-change-the-classname-in-react-js

1条答案

按热度按时间

nfzehxib1#

css规范中的逻辑似乎有缺陷。
我相信您正在尝试将样式应用于具有id的元素 tab 班级呢 changeTab 还有这个班 leftSide 或 rightSide .
现在，您告诉css查找父id的嵌套类 tab .
这意味着您的css正在尝试查找id为的子级 tab 那是一门课 changeTab 然后，它再次使用类查找该元素的子元素 leftSide 或 rightSide .
您的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;
}

请注意我是如何删除css中的间距的。这告诉css查找必须具有id的元素 tab 还有班级 changeTab 或者 leftSide 或 rightSide .

赞(0）回复(0）举报 2021-09-13

我来回答

为什么在尝试更改react js中的类名时css样式消失了？

1条答案

相关问题

热门标签

最新问答