Question

我的任务是在SmartGWT（企业）中使用按钮开发一个小部件。该设计需要按钮周围的边框。我为此设计了CSS。但是，SmartGWT坚持通过在生成的TD上填写“style”属性来覆盖我的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），但“style”中的显式边框声明会覆盖它。

以下是我创建按钮的代码：

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。

为什么SmartGWT会覆盖我的CSS？

0 个答案: