Java 部署后未应用覆盖的GWT CSS样式

我目前正在使用GWT开发一个web应用程序。对于特定视图，我必须使用GWT DataGrid小部件。由于在应用CSS样式时遇到问题，我决定通过在检查页面时提取其名称，重新插入应用于标题和其他部分的特定样式，从而覆盖默认样式

这是我在自定义CSS样式表中的内容：

.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRow {
    background-color: #444444 !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRowCell {
    border: 2px solid #4d4d4d !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridOddRowCell {
    border: 2px solid #4d4d4d !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridOddRow {
    background-color: #4d4d4d !important;
}
.com-google-gwt-user-cellview-client-DataGrid-Style-dataGridHeader {
    color: #aaaaaa !important;
    text-shadow: #4d4d4d 0px 0px 0 !important;
    padding: 0px !important;
}
.com-google-gwt-resources-client-CommonResources-InlineBlockStyle-inlineBlock {
    background-color: #4d4d4d !important;
}

我知道“！important”应该是最后的手段，但值得注意的是，我已经覆盖了默认样式，当我在“超级开发模式”下运行我的应用程序时，它工作得非常好

当我部署.war文件时，问题就出现了。我的样式表中的每个自定义样式都正确应用，但我已覆盖的样式除外。当我加载页面时，Chrome控制台没有显示错误，当我检查页面时，这些样式似乎丢失了

---

有人知道这里出了什么问题以及如何修复吗？请注意，我对web开发不太熟悉，这是我第一次编写web应用程序。

我建议您使用客户端包正确设置DataGrid的样式：

例如，创建一个名为“DataGridPatch.css”的新css表，并包括所需的类，如：

.dataGridHoveredRowCell{}
.dataGridHoveredRow {}
.dataGridOddRowCell {}
.dataGridEvenRowCell {}
.dataGridOddRow {}
.dataGridEvenRow {}
.dataGridSelectedRowCell {}
.dataGridCell {}
.dataGridSelectedRow {}
.dataGridHeader {}

然后创建接口：

public interface CustomDataGridStyle extends DataGrid.Style{}

public interface TableResources extends DataGrid.Resources {
       @Override
       @Source(value = {CustomDataGridStyle.DEFAULT_CSS, "DataGridPatch.css"})
       CustomDataGridStyle dataGridStyle();
}

然后简单地实例化数据网格，如下所示：

dataGrid = new DataGrid<Map<String, String>>(1, GWT.<TableResources> create(TableResources.class));

dataGrid=newdatagrid（1，GWT.create（TableResources.class））；

我建议您使用客户端包正确设置DataGrid的样式：

例如，创建一个名为“DataGridPatch.css”的新css表，并包括所需的类，如：

.dataGridHoveredRowCell{}
.dataGridHoveredRow {}
.dataGridOddRowCell {}
.dataGridEvenRowCell {}
.dataGridOddRow {}
.dataGridEvenRow {}
.dataGridSelectedRowCell {}
.dataGridCell {}
.dataGridSelectedRow {}
.dataGridHeader {}

然后创建接口：

public interface CustomDataGridStyle extends DataGrid.Style{}

public interface TableResources extends DataGrid.Resources {
       @Override
       @Source(value = {CustomDataGridStyle.DEFAULT_CSS, "DataGridPatch.css"})
       CustomDataGridStyle dataGridStyle();
}

然后简单地实例化数据网格，如下所示：

dataGrid = new DataGrid<Map<String, String>>(1, GWT.<TableResources> create(TableResources.class));

dataGrid=newdatagrid（1，GWT.create（TableResources.class））；

您的问题在于，这些样式在dev mod中没有被混淆，因此它们看起来像

.com google gwt用户cellview client DataGrid Style dataGridEvenRow

。编译和部署war文件时，所有文件通常都会被混淆，看起来像

.GKY5KDJCI

。因此，在生产中，您不会覆盖样式。
您可以使用以下属性更改gwt.xml文件中的模糊级别：

其他可用选项有：debug、stable、stable shorttype、stable notype。默认值已模糊。

---

无论如何，您应该遵循Youssef Lahoud建议的方法，为您的datagrid提供自定义css资源。

您的问题是，这些样式在dev mod中没有混淆，因此它们看起来像

.com google gwt用户cellview client datagrid Style dataGridEvenRow

。编译和部署war文件时，所有文件通常都会被混淆，看起来像

.GKY5KDJCI

。因此，在生产中，您不会覆盖样式。
您可以使用以下属性更改gwt.xml文件中的模糊级别：

其他可用选项有：debug、stable、stable shorttype、stable notype。默认值已模糊。

---

无论如何，您应该遵循Youssef Lahoud建议的方法，为您的datagrid提供自定义css资源。

非常感谢Tobika！它不适用于“pretty”值，因为类名的前缀仍然模糊，但它适用于“stable”值！我猜Youssef的解决方案在安全方面更好，但我正在开发一个工具，供我的同事使用，并且只在我们的网络中可用。这不仅是安全性，而且是性能。通过使用CssResource，您可以使用编译器最小化css并缩短应用程序的初始加载时间。我建议仅出于测试目的使用此样式配置…非常感谢Tobika！它不适用于“pretty”值，因为类名的前缀仍然模糊，但它适用于“stable”值！我猜Youssef的解决方案在安全方面更好，但我正在开发一个工具，供我的同事使用，并且只在我们的网络中可用。这不仅是安全性，而且是性能。通过使用CssResource，您可以使用编译器最小化css并缩短应用程序的初始加载时间。我建议仅出于测试目的使用此样式配置。。。