Переопределенные стили CSS GWT, которые не применяются после развертывания

Question

В настоящее время я разрабатываю веб-приложение с использованием GWT. Для определенного вида мне пришлось использовать виджет 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; 
} 

Я знаю, должен быть последним средство, и все, и все, но то, что следует отметить, что я заменяю стили по умолчанию, и он отлично работает, когда я запускаю свое приложение в режиме Super Dev.

Проблема возникает, когда я развертываю файл .war. Каждый пользовательский стиль из моей таблицы стилей применяется правильно, за исключением тех, которые я переопределил. Консоль Chrome не показывает ошибки при загрузке страницы, и эти стили, кажется, отсутствуют, когда я просматриваю страницу.

Кто-нибудь знает, что пошло не так и как это исправить? Обратите внимание, что я не слишком хорошо знаком с веб-разработкой, и это мой первый код, кодирующий веб-приложение.

Answer 1

Ваша проблема заключается в том, что стили не обфускации в dev-модуле, поэтому они будут выглядеть как .com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRow. Когда вы компилируете и развертываете военный файл, все файлы обычно обфускации и будут выглядеть как .GKY5KDJCI. поэтому в производстве вы не переопределяете стили.
вы можете изменить уровень обфускации в файле gwt.xml со следующим свойством:
<set-configuration-property name="CssResource.style" value="pretty"/> другие доступные опции: debug, stable, stable-shorttype, stable-notype. default по умолчанию запутан.
в любом случае вам следует следовать приложению, предложенному Юсефом Лахудом, и предоставить собственный ресурс css для вашего datagrid.

Answer 2

Я предлагаю вам стилизовать DataGrid правильно с помощью клиента сверток:

создать новый CSS лист под названием «DataGridPatch.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));