Javascript 为什么我的HTML/css/JS网站上的css在我的React网站上不起作用？

我想让我在codepen上找到的这个动画coursel在一个基本的create react应用程序网站上工作，所以我把所有东西都移动了，包括我编译成css的SCS，但我看到的只是一个元素，可能是叠加在所有其他元素之上的？我只知道有东西坏了，但我不确定问题出在哪里。。。感谢您的帮助

代码笔：

我的反应元件？（不确定这是不是它的名字）

---

这被放入css、js、html中：

$（'input'）。在（'change'，function（）上{
$（'body'）.toggleClass（'blue'）；
});
*{
框大小：边框框；
}
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
身体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：30px 10px；
字体系列：“DM Sans”，无衬线；
过渡：背景。4s放松；
背景色：#c394f8；
&蓝先生{
背景色：#428aa6；
}
}
输入[类型=收音机]{
显示：无；
}
.卡片{
位置：绝对位置；
宽度：60%；
身高：100%；
左：0；
右：0；
保证金：自动；
转型：转型。4s轻松；
光标：指针；
}
.集装箱{
宽度：100%；
最大宽度：800px；
最大高度：600px；
身高：100%；
变换样式：保留-3d；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
对齐项目：居中；
}
.卡片{
位置：相对位置；
宽度：100%；
身高：100%；
边缘底部：20px；
}
img{
宽度：100%；
身高：100%；
边界半径：10px；
对象匹配：覆盖；
}
#第1项：选中~.cards#song-3、#第2项：选中~.cards#song-1、#第3项：选中~.cards#song-2{
转换：translatex（-40%）比例（.8）；
不透明度：.4；
z指数：0；
}
#第1项：选中~.cards#song-2、#第2项：选中~.cards#song-3、#第3项：选中~.cards#song-1{
转换：translatex（40%）比例（.8）；
不透明度：.4；
z指数：0；
}
#第1项：选中~.cards#song-1、#第2项：选中~.cards#song-2、#第3项：选中~.cards#song-3{
变换：translatex（0）比例（1）；
不透明度：1；
z指数：1；
img{
盒影：0px0px5px0pxrgba（81,81,81,0.47）；
}
}
.玩家{
背景色：#fff；
边界半径：8px；
最小宽度：320px；
填充：16px 10px；
}
.上半部分{
位置：相对位置；
显示器：flex；
对齐项目：居中；
边缘底部：12px；
高度：36px；
溢出：隐藏；
}
.play图标{右边距：10px；}
.歌曲信息{
宽度：计算（100%-32px）；
显示：块；
}
.歌曲信息.标题{
颜色：#403d40；
字体大小：14px；
线高：24px；
}
.子行{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
.字幕，.时间{
字体大小：12px；
线高：16px；
颜色：#C6；
}
.时间{
字体大小：12px；
线高：16px；
颜色：#A5；
字号：500；
左边距：自动；
}
.进度条{
高度：3倍；
宽度：100%；
背景色：#e9efff；
边界半径：2px；
溢出：隐藏；
}
.进展{
显示：块；
位置：相对位置；
宽度：60%；
身高：100%；
背景色：#2992dc；
边界半径：6px；
}
.信息区{
宽度：100%；
位置：绝对位置；
排名：0；
左：30px；
转型：转型。4s轻松融入；
}
#第2项：已检查~.player#测试{
变换：translateY（0）；
}
#第2项：已检查~.player#测试{
转换：translateY（-40px）；
}
#第3项：已检查~.player#测试{
转换：translateY（-80px）；
}

掩体
巴尔塔扎尔
4.05
言犹在耳
调解人
4.05
争吵
奥茨基
4.05
能否显示渲染的位置
由于根元素上有某些内容，样式可能会中断。此外，的属性
在jsx中写为
htmlFor
import React from "react";
import "./css/styles.css";

function App() {
  return (
    <div className="container">
      <input type="radio" name="slider" id="item-1" checked />
      <input type="radio" name="slider" id="item-2" />
      <input type="radio" name="slider" id="item-3" />

      <div className="cards">
        <label className="card" for="item-1" id="song-1">
          <img
            src="https://images.unsplash.com/photo-1530651788726-1dbf58eeef1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80"
            alt="song"
          />
        </label>
        <label className="card" for="item-2" id="song-2">
          <img
            src="https://images.unsplash.com/photo-1559386484-97dfc0e15539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80"
            alt="song"
          />
        </label>
        <label className="card" for="item-3" id="song-3">
          <img
            src="https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60"
            alt="song"
          />
        </label>
      </div>
      <div className="player">
        <div className="upper-part">
          <div className="play-icon">
            <svg
              width="20"
              height="20"
              fill="#2992dc"
              stroke="#2992dc"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              className="feather feather-play"
              viewBox="0 0 24 24"
            >
              <defs />
              <path d="M5 3l14 9-14 9V3z" />
            </svg>
          </div>
          <div className="info-area" id="test">
            <label className="song-info" id="song-info-1">
              <div className="title">Bunker</div>
              <div className="sub-line">
                <div className="subtitle">Balthazar</div>
                <div className="time">4.05</div>
              </div>
            </label>
            <label className="song-info" id="song-info-2">
              <div className="title">Words Remain</div>
              <div className="sub-line">
                <div className="subtitle">Moderator</div>
                <div className="time">4.05</div>
              </div>
            </label>
            <label className="song-info" id="song-info-3">
              <div className="title">Falling Out</div>
              <div className="sub-line">
                <div className="subtitle">Otzeki</div>
                <div className="time">4.05</div>
              </div>
            </label>
          </div>
        </div>
        <div className="progress-bar">
          <span className="progress"></span>
        </div>
      </div>
    </div>
  );
}

export default App;

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 30px 10px;
  font-family: "DM Sans", sans-serif;
  -webkit-transition: background 0.4s ease-in;
  transition: background 0.4s ease-in;
  background-color: #1e88ce;
}

body.blue {
  background-color: #428aa6;
}

input[type="radio"] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 800px;
  max-height: 600px;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
}

#item-1:checked ~ .cards #song-3,
#item-2:checked ~ .cards #song-1,
#item-3:checked ~ .cards #song-2 {
  -webkit-transform: translatex(-40%) scale(0.8);
  transform: translatex(-40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2,
#item-2:checked ~ .cards #song-3,
#item-3:checked ~ .cards #song-1 {
  -webkit-transform: translatex(40%) scale(0.8);
  transform: translatex(40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1,
#item-2:checked ~ .cards #song-2,
#item-3:checked ~ .cards #song-3 {
  -webkit-transform: translatex(0) scale(1);
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
}

#item-1:checked ~ .cards #song-1 img,
#item-2:checked ~ .cards #song-2 img,
#item-3:checked ~ .cards #song-3 img {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}

.player {
  background-color: #fff;
  border-radius: 8px;
  min-width: 320px;
  padding: 16px 10px;
}

.upper-part {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.play-icon {
  margin-right: 10px;
}

.song-info {
  width: calc(100% - 32px);
  display: block;
}

.song-info .title {
  color: #403d40;
  font-size: 14px;
  line-height: 24px;
}

.sub-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.subtitle,
.time {
  font-size: 12px;
  line-height: 16px;
  color: #c6c5c6;
}

.time {
  font-size: 12px;
  line-height: 16px;
  color: #a5a5a5;
  font-weight: 500;
  margin-left: auto;
}

.progress-bar {
  height: 3px;
  width: 100%;
  background-color: #e9efff;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  display: block;
  position: relative;
  width: 60%;
  height: 100%;
  background-color: #2992dc;
  border-radius: 6px;
}

.info-area {
  width: 100%;
  position: absolute;
  top: 0;
  left: 30px;
  -webkit-transition: -webkit-transform 0.4s ease-in;
  transition: -webkit-transform 0.4s ease-in;
  transition: transform 0.4s ease-in;
  transition: transform 0.4s ease-in, -webkit-transform 0.4s ease-in;
}

#item-2:checked ~ .player #test {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#item-2:checked ~ .player #test {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}

#item-3:checked ~ .player #test {
  -webkit-transform: translateY(-80px);
  transform: translateY(-80px);
}
/*# sourceMappingURL=HeroSection.css.map */