javascript - Change font of suggested actions buttons in webchat control
问题描述
I try to change the font of the "suggested actions"-button similar on how it is shown in this example for changing the font of the bubble text: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md
In the example they change the fontFamily of the "textContent" element.
I tried to pass something like this:
styleSet.suggestedAction= {
...styleSet.suggestedAction,
"> button.fontFamily": "'Xy font', sans-serif"
};
But I'm not a css hero, so any help is appreciated
解决方案
You have two options available to you. Which you choose depends on how granular you want to be in your changes.
The first option is to simply update the default value that is generated when Web Chat is rendered in React. To do this, you simply pass in your new value via renderWebChat
.
This is the recommended method of the BotFramework-WebChat team as it significantly reduces the chance for breaking changes down the road for developers. It also maintains the other default values meaning only the properties you changed are altered.
Please note, this option will change the font globally for web chat.
const styleOptions = {
primaryFont: "'Arial', sans-serif"
}
[...]
window.WebChat.renderWebChat( {
directLine: [...],
styleOptions
});
The second option is to create a new styleSet and specify the changes you want there. However, because you are directly specifying a DOM element and property, albeit via web chat, should some aspect of web chat receive an update that changes the element or property used, this can cause a breaking change for you. Additionally, you will need to pass all the property values necessary as this strips all default values from web chat.
You can still pass values in using the default styleSet properties, including primaryFont
. But, for true customizations, you would add those via styleSet.suggestedAction
. You can find default values here in the BotFramework-WebChat repo, should you need to reference them.
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
});
Hope of help!
推荐阅读
- sed - Jenkins 声明性管道脚本中的 sed 命令
- node.js - 如何打印 node.js 中的所有 cookie?
- javascript - 为什么 jquery 数据表永远不会重新初始化?
- mongodb - 如何获取mongodb(robomongo)中列中存在的相同值的总和
- scala - Apache Spark 2.2 JobProgressListener 替代品
- python - python可变对象通过一个进程
- google-chrome-extension - Chrome 扩展使用 webrequest 取消阻止被阻止的 url
- python - 如何用 DFT 计算一阶导数?
- python - 非常小的负均方误差
- c# - 如何将测试用例作为“经过测试的用户故事”与 Microsoft.TeamFoundation API 链接?