我尝试更改“建议操作”按钮的字体，类似于此示例中用于更改气泡文本字体的显示方式： https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md
在示例中，他们更改了“textContent”元素的 fontFamily。
我试图传递这样的东西：
styleSet.suggestedAction= {
...styleSet.suggestedAction,
"> button.fontFamily": "'Xy font', sans-serif"
};
但我不是 css 英雄，因此感谢任何帮助
【问题讨论】：
标签： javascript css botframework web-chat
您有两种选择。您选择哪一种取决于您希望更改的粒度。
第一个选项是简单地更新在 React 中呈现 Web Chat 时生成的默认值。为此，您只需通过 renderWebChat 传递您的新值。
这是 BotFramework-WebChat 团队推荐的方法，因为它显着降低了开发人员在开发过程中破坏更改的机会。它还保留其他默认值，这意味着仅更改您更改的属性。
请注意，此选项将全局更改网络聊天的字体。
const styleOptions = {
primaryFont: "'Arial', sans-serif"
}
[...]
window.WebChat.renderWebChat( {
directLine: [...],
styleOptions
});
第二个选项是创建一个新的样式集并在其中指定您想要的更改。但是，由于您直接指定了 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
});
希望有帮助！
【讨论】：