css - 如何将 Uibinder 小部件的属性带入 GWT 中的 CSS？

Question

好的，在 .xml 文件中，这可以正常工作。

<g:FlexTable ui:field="wishlistFlexTable"  borderWidth="1" cellPadding="5" />

注意：我们在 Gwt 中编码时得到了类似的 FlexTable 设置方法：setBorderWidth 和 setCellPadding。

但是，如果我们把borderWidth & cellPadding 带入css，在css中就不行了，

.gwtFlexTable{
   borderWidth:1;
   cellPadding:5;
}

在xml中

<g:FlexTable ui:field="wishlistFlexTable"  addStyleNames="{res.css.gwtFlexTable}"  />

那么如何在 GWT 中将 Uibinder Widgets 的属性引入到 CSS 中呢？

Answer 1

我认为你的 CSS 是错误的：

.gwtFlexTable{
   border-width:1px;
   cell-padding:5px;
}

您忘记了单位（它们在 CSS 中是强制性的）。并且borderWidth必须写为border-width

Answer 2

您放入的任何 css 类都会<ui:style>在运行时被混淆，将它们变成字母数字字符串。所以你.gwtFlexTable看起来像.A87GFESAF. 要允许外部 CSS 类名称为您的表格设置样式，您必须声明您的 styleNames 而不使用大括号{}：

<g:FlexTable ui:field="wishlistFlexTable"  addStyleNames="gwtFlexTable"  />

或者如果你想同时使用外部类和内部<ui:style>的样式，你可以混合 CSS 类：

<g:FlexTable ui:field="wishlistFlexTable"  addStyleNames="{res.css.gwtFlexTable} gwtFlexTable"  />
<!-- where {res.css.gwtFlexTable} is a ui:style name and gwtFlexTable is an unobfuscated CSS selector -->

Answer 3

无论如何，我找到了这段代码，它工作正常

.flexTable td{
    border: 1px solid #BBBBBB;
    padding: 3px;
 }