0

我的任务是在 SmartGWT（企业）中开发一个带有按钮的小部件。该设计要求按钮周围有边框。我为此设计了 CSS。然而，SmartGWT 坚持通过在生成的 TD 上填充“样式”属性来覆盖我的 CSS 边框定义。Canvas.setBorder 的文档实际上说“此属性将相同的边框应用于此组件的所有四个边。可以在 CSS 样式中设置不同的每边边框，并通过 styleName 应用。” 显然，它意味着能够使用 CSS 控制边框定义。

我意识到我可以使用具体的边框定义调用 setBorder，但我需要根据状态（悬停、向下等）设置不同的边框

例如，按钮标签是“Review”。这是生成的 HTML：

<td class="controlButton" style="border: currentColor; border-image: none; text-align: center; padding-top: 0px; padding-bottom: 0px; vertical-align: middle;">
    <div style="vertical-align: middle; display: inline-block; white-space: nowrap; max-width: 100%;">
        <div id="isc_1G" overflow: hidden; vertical-align: middle; display: inline-block; -ms-text-overflow: ellipsis; max-width: 100%; box-sizing: border-box;">Review</div></div></td>

在我的 CSS 中，我定义了一个带有边框的类 (controlButton)，但“样式”中的显式边框声明覆盖了它。

这是我创建按钮的代码：

Button button = new Button(“Review”);
button.setBaseStyle(“controlButton”);
button.setBorder("inherit");
button.setHeight(28);

我也试过不调用setBorder，调用setBorder(null)，和上面一样，setBorder(“inherit”)。没有任何东西会影响内联样式。

这是 CSS（为简洁起见，省略了所有的状态定义）：

.controlButton {
    background-color: #353535;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    padding: 2px;
    margin: 2px;
    border-radius: 5px;
    border: 1px solid #b9b9b9;
    color: #d5d5d5;
}

在浏览器的编程模式下，我可以手动取消选中“内联样式”中的边框定义，使用我的 CSS 类我的按钮看起来是正确的。

顺便说一句，我意识到我可以在 CSS 上使用 !important 修饰符，但必须有一种方法可以让 SmartGWT 在没有它的情况下停止覆盖。

SmartGWT 版本是 4.0.5。GWT 版本是 2.7.0。

4

0 回答 0