TypeScript自定义Adaptive Card按钮样式：自定义渲染器实现求助

核心思路 #

不需要实现全量自定义渲染器，通过Adaptive Cards提供的StyleSet样式集或局部自定义元素渲染器，就能快速修改按钮的字体和背景色，以下是具体实操步骤：

方法一：通过StyleSet批量修改按钮样式 #

这是最简便的方式，适合统一修改所有按钮的样式：

1. 导入核心依赖

import * as AdaptiveCards from "adaptivecards";

2. 定义自定义样式集
   直接覆盖action.button相关的样式规则，按需修改字体、背景色：

const customStyleSet = new AdaptiveCards.StyleSet({
  // 默认按钮样式
  "action.button": {
    backgroundColor: "#2563eb", // 自定义背景色（示例：亮蓝色）
    color: "#ffffff", // 自定义字体颜色（示例：白色）
    fontFamily: "'Segoe UI', Roboto, sans-serif", // 自定义字体
    fontSize: "14px",
    padding: "8px 16px",
    borderRadius: "4px"
  },
  // 可选：按钮悬停状态样式
  "action.button.hovered": {
    backgroundColor: "#1d4ed8"
  },
  // 可选：按钮按下状态样式
  "action.button.pressed": {
    backgroundColor: "#1e40af"
  }
});

3. 配置渲染器并应用样式

// 初始化渲染器
const renderer = new AdaptiveCards.AdaptiveCardRenderer();
// 绑定自定义样式集
renderer.styleSet = customStyleSet;

4. 渲染卡片示例

// 示例卡片JSON
const demoCard = {
  type: "AdaptiveCard",
  version: "1.5",
  body: [{ type: "TextBlock", text: "自定义按钮样式演示" }],
  actions: [
    { type: "Action.Submit", title: "提交", data: { action: "submit" } },
    { type: "Action.OpenUrl", title: "跳转", url: "https://example.com" }
  ]
};

// 渲染到页面DOM
const renderedCard = renderer.renderCard(demoCard);
document.getElementById("card-container")?.appendChild(renderedCard);

方法二：自定义元素渲染器（针对特定按钮） #

如果需要给单个/特定类型按钮单独设置样式，可以注册自定义渲染器：

// 注册自定义Submit按钮渲染器
AdaptiveCards.GlobalRegistry.registerRenderer(
  "Action.Submit",
  {
    render: (action, hostConfig, styleSet) => {
      const button = document.createElement("button");
      button.textContent = action.title;
      
      // 单独设置该类型按钮的样式
      button.style.backgroundColor = "#10b981"; // 绿色背景
      button.style.color = "#ffffff"; // 白色字体
      button.style.fontFamily = "Arial, sans-serif"; // 自定义字体
      button.style.padding = "10px 20px";
      button.style.border = "none";
      button.style.borderRadius = "6px";
      
      // 绑定Adaptive Card的事件逻辑
      button.addEventListener("click", () => {
        hostConfig.onExecuteAction?.(action);
      });
      
      return button;
    }
  },
  AdaptiveCards.CardElementType.Action
);

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