React页面图片不响应CSS、hidden-Mouseketeer类样式失效问题求助

问题根因 #

• React 中指定元素CSS类必须使用className属性，你代码里写的class属于HTML原生属性，是React的保留关键字，不会被挂载到最终渲染的DOM节点上，因此CSS选择器无法匹配到对应元素，样式不生效。
• 你修改类名加空格后临时生效是开发环境热重载的异常缓存导致，刷新后React恢复标准渲染逻辑，自动忽略class属性，所以样式再次失效。
• 图片无法居中是因为<Image>组件默认是行内块元素，mx-auto类只对块级元素生效。

修复方案 #

1. 把所有JSX中的class属性替换为className，如果要实现居中可以额外加Bootstrap的d-block类将图片转为块级元素：

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

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

2. 也可以直接修改CSS补全居中样式：

.hidden-Mouseketeer{
  width: 20%;
  /* 新增两行实现居中 */
  display: block;
  margin: 0 auto;
  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);
  }
}

如果修改后仍有样式被覆盖的情况，可以在对应CSS属性后加!important临时测试优先级，确认是否是其他全局样式权重更高导致的问题。

内容的提问来源于stack exchange，提问作者Joel Munoz