如何自定义Gmail App Script插件SelectionInput单选按钮颜色

原生CardService提供的SelectionInput单选组件属于Google Workspace插件的托管渲染组件，官方未开放任何样式自定义配置项，默认的#009688青绿色选中态是Workspace全局主题色，没有直接修改原生组件颜色的方法。

组件默认效果：

对应原生实现代码如下：

const card = CardService.newCardBuilder();

const section = CardService.newCardSection();

// 待自定义样式的单选组件
const toneRadioButton = CardService.newSelectionInput()
    .setType(CardService.SelectionInputType.RADIO_BUTTON)
    .setTitle("Tweak the suggestion to be positive or negative.")
    .setFieldName("toneField")
    .setOnChangeAction(regenerateSuggestionAction)
    .addItem("Negative", false)
    .addItem("Neutral", true)
    .addItem("Positive", false)

section.addWidget(toneRadioButton)
card.addSection(section);
card.build()

可行替代方案 #

• 自定义按钮组模拟单选逻辑（推荐，支持完全自定义颜色）
  放弃原生单选组件，用按钮组自行实现单选交互，样式灵活度最高：

  • 用newButtonSet()作为容器存放三个选项按钮
  • 选中态按钮设置为FILLED样式，通过setBackgroundColor()传入目标自定义色值
  • 未选中态按钮设置为TEXT或OUTLINE样式
  • 给每个按钮绑定点击回调，点击后重新渲染卡片更新选中状态，同时记录选中值，交互逻辑和原生单选完全一致

  核心实现示例：

  // 示例：选中Positive选项，自定义选中色为#2563eb
  const toneButtonSet = CardService.newButtonSet();
  const toneOptions = [
    { label: "Negative", value: "negative", selected: false },
    { label: "Neutral", value: "neutral", selected: false },
    { label: "Positive", value: "positive", selected: true }
  ];
  
  toneOptions.forEach(option => {
    let optionBtn = CardService.newTextButton()
      .setText(option.label)
      .setOnClickAction(
        CardService.newAction()
          .setFunctionName("handleToneChange")
          .setParameters({ selectedTone: option.value })
      );
    
    if (option.selected) {
      // 配置选中态自定义背景色
      optionBtn = optionBtn
        .setTextButtonStyle(CardService.TextButtonStyle.FILLED)
        .setBackgroundColor("#2563eb");
    } else {
      optionBtn = optionBtn.setTextButtonStyle(CardService.TextButtonStyle.TEXT);
    }
  
    toneButtonSet.addButton(optionBtn);
  });
  
  // 将按钮组加入卡片分区即可
  section.addWidget(toneButtonSet);
  

• 注意事项
  不要尝试通过DOM注入、覆盖前端CSS的方式修改原生组件样式，这类操作违反Google Workspace插件开发规范，会导致插件上架审核被拒。

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