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

Question

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

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

初始化:

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

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

资源接口(interface)

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();
    }
}

错误.css

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

Answer 1

如果您想在小部件上获取 gwt-TextBox-error 样式名称，您需要设置 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")。

---更新---

因此，我尝试运行您的案例并且效果很好。首先，您需要在运行时将资源中的 css 注入(inject)页面:

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

我在 onModuleLoad() 的开头使用它

然后，添加错误样式使用:box.addStyleName(STYLES); 和 box.removeStyleName(STYLES); 将其删除。

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