Question

为什么我不能将自定义CSS样式应用于单个TextBox？

我正在尝试在单个TextBox上设置一些错误样式。以下实施有什么问题？

INIT：

static final String STYLES = ErrorRes.INSTANCE.css().style();

@UiField TextBox box;
box.setStylePrimaryName(STYLES);

资源界面

interface ErrorRes extends ClientBundle {
    static final ErrorRes INSTANCE = GWT.create(ErrorRes.class);

    @Source("Error.css")
    Style css();

    interface Style extends CssResource {
        @ClassName("gwt-TextBox-error")
        String style();
    }
}

Error.css

.gwt-TextBox-error {
     border: 1px solid red !important;
}

Answer 1

如果您想在窗口小部件上获取gwt-TextBox错误样式名称，则需要设置box.setStylePrimaryName("gwt-TextBox"); - 默认情况下是这样。当发生错误时，使用box.setStyleDependentName("error", true); HTML将 class =“gwt-TextBox gwt-TextBox-error”。要清除错误样式，请使用box.setStyleDependentName("error", false);

或

您可以同样方式使用addStyleName("gwt-TextBox-error")和removeStyleName("gwt-TextBox-error")。

<强> --- --- UPDATE

所以，我试着运行你的案子并且运作良好。首先，您需要在运行时从资源注入css：

ErrorRes.INSTANCE.css().ensureInjected();

我在onModuleLoad()
的开头使用它
然后，要添加错误样式，请使用：box.addStyleName(STYLES); 并box.removeStyleName(STYLES);删除它。

您不能将对setStylePrimaryName()和setStyleDependentName()与捆绑的css一起使用，因为CSS名称将被混淆。

如何在TextBox上以编程方式设置css错误样式

1 个答案: