如何使用Microsoft Web框架控制按钮的样式？

Question

我正在使用Microsoft Web framework。

关注button document，

<button name="button" class="c-button" type="submit">Button</button>

给了我一个蓝色按钮。

我想使用button类型，但它会给我一个灰色按钮。

<button name="button" class="c-button" type="button">Button</button>

如何正确控制按钮的样式？感谢

jsfiddle

Answer 1

按照设计，MWF专门用CSS定义type属性，以实现跨Microsoft属性的设计一致性目标。每次使用type =“button”的样式都是相同的。同样，type =“submit”的每次使用也都是类似的。这确保了如果有一天MWF决定更改此样式，则使用此标记的所有网站将同时接收更新的样式。

MWF的架构与其他框架（如Bootstrap，Foundation，Material等）完全不同。这是因为我们专门设计符合Microsoft设计语言指南。

Answer 2

从你的js小提琴中，看起来该按钮的背景颜色为：.btn，a.c-button [role = button]，button.c-button。要覆盖它，只需将以下内容放在css文件中即可。

.btn, a.c-button[role=button], button.c-button {
    background-color: blue;
}

使用浏览器中的开发人员工具检查元素并查看样式的应用方式通常很有帮助。