我们可以在microsoft bot框架中自定义卡片中的按钮设计

Question

我知道我们可以根据我们的要求修改botchat.css来修改设计。现在，我想知道每个按钮可以是不同的颜色，如图所示。

[button1] [button2] [button3]

所有按钮必须是不同的颜色。

Answer 1

在您的custom.css或您的自定义CSS文件名中，您可以通过使用此类CSS来解决此问题，以说明您将在卡片上生成的最大按钮数量：

.wc-card button:nth-of-type(3) {
    background-color: green;
    color: #0078d7;
    min-height: 32px;
    width: 100%;
    padding: 0 16px;
}
.wc-card button:nth-of-type(2) {
    background-color: red;
    color: #0078d7;
    min-height: 32px;
    width: 100%;
    padding: 0 16px;
}
.wc-card button:nth-of-type(1) {
    background-color: orange;
    color: #0078d7;
    min-height: 32px;
    width: 100%;
    padding: 0 16px;
}
...

此CSS将产生以下结果：