Next.js中AMP使用amp-bind动态添加类后CSS样式不生效排查

类名通过amp-bind动态更新正常但对应样式不生效，本质是两类不符合AMP运行规则的场景导致的：

• 动态绑定的类名未被纳入AMP认可的样式表作用域
• 类名与实际拥有样式规则的选择器名称不匹配（常见于CSS Modules场景）

• 校验样式的加载位置
  打开页面原始源码（不要只看DevTools渲染后的DOM），搜索.pagination-buttons.active的样式规则，确认该规则存在于<style amp-custom>内联样式块中。AMP禁止加载外链CSS作为自定义样式，如果Next.js将这部分样式抽到了外链CSS文件中，对应规则会被AMP拦截，哪怕DOM上类名正常也不会生效。需要调整Next.js的样式编译配置，把分页组件相关的样式强制输出为内联的amp-custom样式，不要走外链资源。
• 修正CSS Modules下的类名不匹配问题
  如果项目使用Next.js默认的CSS Modules机制，所有类名在构建时会被编译为带哈希后缀的唯一名称（例如active__a1B2c）。硬编码在data-amp-bind-class里的裸类名active，是没有对应样式规则的空类，哪怕被添加到DOM上也不会触发预设样式。
  正确实现方式是将编译后的实际类名注入绑定逻辑：

  // 导入CSS Modules编译后的类名映射
  import paginationStyles from './Pagination.module.css'
  
  {foo.map((item, i) => (
      <button
          // 类名使用编译后的映射值
          className={paginationStyles['pagination-buttons']}
          // 绑定逻辑中使用真实的类名字符串，不要硬编码裸类名
          data-amp-bind-class={
            `data.currentPage==${i} ? '${paginationStyles['pagination-buttons']} ${paginationStyles.active}' : '${paginationStyles['pagination-buttons']}'`
          }
      >
          {i + 1}
      </button>
  ))}
  

• 排除选择器作用域不匹配的问题
  不要将.active的样式放在带scoped标记的样式块中（例如styled-jsx的非全局样式、带作用域哈希的CSS选择器），这类选择器会额外匹配DOM元素上的作用域属性，动态添加的类名不会自动附带对应作用域属性，导致选择器匹配失败。需要将激活态按钮的样式放在全局作用域的amp-custom内联样式块中，确保选择器可以直接匹配对应的类名。
• 检查样式优先级
  确认.pagination-buttons.active的选择器优先级高于按钮的默认基础样式，避免激活态样式被优先级更高的原有规则覆盖。

注意：amp-bind对class属性的修改为全量替换逻辑，需要确保三元表达式两个分支返回的所有类名，都已提前在合规的内联样式表中声明；未提前声明的动态类名会被AMP的安全机制拦截，无法正常生效。

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