javascript - 更改jQuery UI Button的大小？

我一直在整个页面上使用jQuery UI按钮，但是我还没有找到解决似乎很简单的问题的方法。我希望我的一些按钮比其他按钮小，这应该像将按钮文本的CSS设置为font: .8em;这样简单，但是jQuery UI会使用DOM元素并将其包装起来:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

因此，如果我有<button class="small-button">Small button!</button>，jQuery会将文本放在子跨度中。提供给small-button类的任何字体大小将被忽略。

必须有一种解决方法，而不必担心jQuery如何实现其按钮。有任何想法吗？

最佳答案

如果直接使用ui-button-text设置font-size的样式，则可以通过应用!important在更高级别覆盖它。如:

.small-button {
   font-size: .8em !important;
}

编辑:尝试直接在.ui-button-text上设置CSS样式以继承:

.ui-button-text {
   font-size: inherit !important;
}

这也应该使.small-button上的!important不相关。