如何让styled-components每次运行时都不会自动变更生成的类名？

针对你需要保存静态HTML复用的需求，有三种可落地的方案，按需选择即可：

方案1：给单个组件手动绑定固定类名（最便捷，适合少量组件场景） #

通过attrs方法给styled组件注入固定class，渲染后会同时存在动态生成类和你的固定类，导出HTML时直接使用固定类关联样式即可：

import styled, { keyframes } from "styled-components";
import Flash from "@bit/formidablelabs.react-animations.flash";

const FlashAnimation = keyframes`${Flash}`;
const FlashDiv = styled.div.attrs({
  className: 'fixed-flash-wrapper'
})`animation: infinite 5s ${FlashAnimation};`;

// 渲染后生成的DOM结构为 <div class="sc-xxx fixed-flash-wrapper"><img .../></div>
<FlashDiv>
  <img .../>
</FlashDiv>

方案2：项目层面统一固定所有styled-components类名（适合全项目批量处理） #

配置babel-plugin-styled-components插件的生成规则，让编译阶段生成的类名永久固定，不会随运行/编译次数变化：

1. 确保项目已安装babel-plugin-styled-components
2. 修改babel配置文件：

{
  "plugins": [
    ["styled-components", {
      "displayName": true,
      "fileName": true,
      // 自定义类名生成规则，可根据需求调整
      "generateId": (componentId, componentName) => `sc-${componentName}-${componentId.slice(0,4)}`
    }]
  ]
}

方案3：全静态抽离样式（最适合静态HTML复用场景） #

如果你的核心需求是导出的HTML可以完全脱离React运行，直接把动画样式抽为固定全局CSS是最稳妥的选择，完全规避动态类问题：

1. 先提取flash动画的静态CSS：

@keyframes fixed-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
.fixed-flash-wrapper {
  animation: infinite 5s fixed-flash;
}

2. 组件直接使用固定class即可：

<div className="fixed-flash-wrapper">
  <img .../>
</div>

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