更改网络聊天控件中建议操作按钮的字体

Question

我尝试更改 "suggested actions" 按钮的字体，类似于此示例中显示的更改气泡文本字体的方式： https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md

在示例中，他们更改了 "textContent" 元素的 fontFamily。

我试图通过这样的东西：

styleSet.suggestedAction= {
   ...styleSet.suggestedAction,
   "> button.fontFamily": "'Xy font', sans-serif"
};

但我不是 css 英雄，因此感谢您的帮助

Answer 1

您有两种选择。您选择哪个取决于您希望更改的粒度。

第一个选项是简单地更新在 React 中呈现 Web Chat 时生成的默认值。为此，您只需通过 renderWebChat.

传递新值即可

这是 BotFramework-WebChat 团队推荐的方法，因为它显着降低了开发人员在开发过程中破坏更改的机会。它还会保留其他默认值，这意味着只会更改您更改的属性。

请注意，此选项将全局更改网络聊天的字体。

const styleOptions = {
  primaryFont: "'Arial', sans-serif"
}

[...]

window.WebChat.renderWebChat( {
  directLine: [...],
  styleOptions
});

第二个选项是创建一个新的样式集并在其中指定您想要的更改。但是，由于您直接指定了 DOM 元素和属性，尽管是通过网络聊天，如果网络聊天的某些方面收到更改元素或使用的属性的更新，这可能会导致对你来说是一个重大的改变。此外，您需要传递所有必要的属性值，因为这会从网络聊天中删除所有默认值。

您仍然可以使用默认样式集属性传递值，包括 primaryFont。但是，对于真正的自定义，您可以通过 styleSet.suggestedAction 添加它们。如果需要引用它们，您可以在 BotFramework-WebChat 存储库中找到默认值 here。

const styleSet = createStyleSet ( {
  bubbleBackground: 'blue',
  bubbleFromUserBackground: 'red',

  bubbleBorderRadius: 18,
  bubbleFromUserBorderRadius: 18,
} );

styleSet.suggestedAction = {
  ...styleSet.suggestAction,
  '& > button': {
    fontFamily: "'Arial', sans-serif"
}

window.WebChat.renderWebChat( {
  directLine: [...],
  styleSet
});

希望得到帮助！

更改网络聊天控件中建议操作按钮的字体

Change font of suggested actions buttons in webchat control

javascript

css

web-chat

botframework