如何在自适应卡片上使用 CSS 样式？答案

【问题标题】：How to use CSS styling on adaptive cards?如何在自适应卡片上使用 CSS 样式？
【发布时间】：2020-01-26 01:35:09
【问题描述】：

我正在尝试使用 CSS 在更细粒度的级别上设置自适应卡片的样式，但是默认 CSS 类的相似名称使得定位单个元素变得困难。

我尝试使用特定参数来定位它，但它们最终还是在某种程度上违反了规则。我在自适应卡片构建过程中尝试过使用唯一 ID 或唯一CSSSelectors，但似乎在它进入前端时它们都被剥离了。

以下是我迄今为止尝试过的一些示例。

li div .content .attachment .attachment div .ac-container:not(:first-child) .ac-columnSet:hover{
    background: #e6eaed;
    color: #323232;
}

li div .content .attachment .attachment div .ac-container:not(:first-child) .ac-columnSet:hover .ac-container .ac-textBlock p{
    color: #323232;
}```

【问题讨论】：

澄清一下，您是要更改所有（且仅）自适应卡的 CSS，还是要针对特定的卡？另外，您使用的是 v3 还是 v4 网络聊天？
嗨@StevenKanberg 我正在尝试更改特定自适应卡片的CSS。具体来说，我在同一个聊天中有多个自适应卡，并希望确保 css 更改不会重叠。我正在使用 v4 网络聊天。

标签： css botframework adaptive-cards web-chat

【解决方案1】：

首先，我想提一下，此功能已经是 BotFramework-WebChat 存储库中正在处理的功能请求。我不知道这方面的预计到达时间，所以不要计划很快。但是，请留意。

这可以通过一点黑客攻击来实现。简而言之，这些是您的步骤：

在您的自适应卡中创建一个“触发器”属性并为其分配一个唯一值。
创建一个查找触发器值的activityMiddleware。收到后，通过附加 id 更新将容纳传入自适应卡的元素。
将纯 CSS 添加到您的 html 中，根据第 2 步中附加的 id 设置卡片样式。
将activityMiddleware 对象添加到直线。

希望有帮助！

下面是示例代码：

mainDialog.js - 从我的机器人发送的自适应卡片

  async basicAdaptiveCard ( stepContext ) {
    const card = {
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "type": "AdaptiveCard",
      "version": "1.0",
      "trigger": "ServiceCardTrigger",
      "body": [
        {
          "type": "TextBlock",
          "text": "Hi!! How can I help you today?",
          "weight": "Bolder",
          "size": "Medium"
        }
      ],
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Placeholder Message",
          "data": "close"
        }
      ]
    }

    const ac_card = CardFactory.adaptiveCard( card );
    await stepContext.context.sendActivity(
      {
        attachments: [ ac_card ]
      }
    );
    return { status: DialogTurnStatus.waiting };
  }

index.html - 仅显示基本信息。在此，我通过一个包含“服务详细信息”值的按钮进行跟踪。它很简单，但适用于演示。必要时更新。

<style>
  #ServiceCard {
    background-color: #e6eaed;
    color: #323232;
  }

  #ServiceCard:hover p {
    color: red
  }
</style>

[...]

<script type="text/babel">
  [...]

  const activityMiddleware = () => next => card => {
    const { activity: { from, type, attachments } } = card;
    if (type === 'message' && from.role === 'bot') {
      if(attachments && attachments[0].content.trigger === 'ServiceCardTrigger') {
        let children = document.getElementsByClassName('ac-adaptiveCard');
        for (let i = 0, j = children.length; i <= j; i++) {
          if(i === j - 1) {
            let child = children[i];
            if(child.lastChild.innerHTML.includes('Service details')) {
              child.id = 'ServiceCard';
            }
          }
        };
      }
    } 
    else {
      return next(card)
    }
  }

  [...]

  window.ReactDOM.render(
    <ReactWebChat
      activityMiddleware={ activityMiddleware }
      directLine={ directLine }
      username={'johndoe'}
    />,
    document.getElementById( 'webchat' )
  );

  [...]
</script>

【讨论】：