我网页上的 React 图像没有响应 css

Question

由于某种原因，我的班级“hidden-Mouseketeer”没有正确读取我的 CSS 文件。这是一个带有摆动动画的图像，并且会左右摆动。 （图像也不会居中）。页面的其余部分正在从 css 文件中读取。

由于某种原因，如果我在类名的末尾添加一个空格并保存它，它会有点跳转启动 css。刷新页面后就可以正常阅读了。但不久之后，它会停止渲染 id 喜欢它的样子，并且图像将被完全渲染。

这是 React 部分，包含导入

import HM from "../img/HiddenMouseketeer.png";
import "../style/App.css";

    <Container fluid>
      <Container class="mx-auto">
         <Image src={HM} class="hidden-Mouseketeer" alt="Hidden Mouseketeer" />
      </Container>
    </Container>

这里是 CSS 样式部分

.hidden-Mouseketeer{
  width: 20%;
  animation: swing 6s infinite;
}

@keyframes swing {
  0%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(-45deg);
  }
  50%{
    transform: rotate(0deg);
  }
  75%{
    transform: rotate(45deg);
  }
  100%{
    transform: rotate(0deg);
  }
}

感谢任何帮助！

Answer 1

对于 React 组件，您需要使用 className 而不是 class。