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

Question

我尝试更改“建议的操作”按钮的字体，类似于在此示例中如何显示以更改气泡文本的字体： 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
});

第二个选项是创建一个新的styleSet并在此处指定所需的更改。但是，由于您是通过网络聊天直接指定DOM元素和属性，因此如果网络聊天的某些方面收到了更改所使用的元素或属性的更新，则可能会给您带来重大变化。此外，您将需要传递所有必要的属性值，因为这会剥夺网络聊天中的所有默认值。

您仍然可以使用默认的styleSet属性（包括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
});

希望有帮助！