如何规避邮件中amp-list组件渲染时自动添加的多余样式？

针对你遇到的amp-list被自动添加--loader-delay-offset: 48ms !important、height: 184px、overflow: hidden !important这些样式导致数据无法正常显示的问题，可以试试以下几种方法：

• 用高优先级选择器覆盖强制样式
  给目标amp-list添加自定义class，然后在AMP邮件允许的<style amp4email>标签内写覆盖样式：

  .custom-amp-list {
    --loader-delay-offset: 0ms !important;
    height: auto !important;
    overflow: visible !important;
  }
  

  对应的amp-list标签：

  <amp-list class="custom-amp-list" src="你的数据源地址">
    <!-- 你的模板内容 -->
  </amp-list>
  

  注：AMP邮件仅允许内联样式或<style amp4email>内的样式，且有严格的样式规则限制，确保代码符合AMP邮件规范。

• 调整amp-list的布局属性
  避免使用默认布局，改用layout="flex-item"或layout="responsive"（需配合width/height属性），让组件自适应内容尺寸，可能会绕过固定height的默认样式：

  <amp-list layout="flex-item" src="你的数据源地址" class="custom-amp-list">
    <!-- 你的模板内容 -->
  </amp-list>
  

• 禁用加载动画（若无需加载器）
  如果不需要amp-list的加载动画，添加noloading属性，这会阻止加载相关样式变量（比如--loader-delay-offset）的生成：

  <amp-list noloading src="你的数据源地址" class="custom-amp-list">
    <!-- 你的模板内容 -->
  </amp-list>
  

• 全局重置amp-list样式（按需使用）
  若所有amp-list都不需要这些默认样式，可在<style amp4email>内全局重置：

  amp-list {
    --loader-delay-offset: initial !important;
    height: auto !important;
    overflow: visible !important;
  }
  

  注意：如果部分amp-list需要保留默认样式，建议还是用自定义class单独处理，避免影响全局。

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