Как переопределить стили CSS в GWT/Bootstrap?

Question

Я только начал порт twitter's bootstrap до GWT (см. Проект github here и очень уродливое демо here), но у меня был журнал проблем с стилями загрузки и стилями Gwt.

Bootstrap помещает верхнюю границу в элементы tr/td, а компоненты GWT в основном используют таблицы везде. В demo вы можете увидеть эту ошибку в левой вертикальной панели.

Итак, я искал способ, чтобы компоненты GWT игнорировали стили бутстрапа, и я понятия не имею, как это сделать.

Есть ли простой способ заставить его работать правильно?

Заранее спасибо.

Answer 1

Это возможно, но несколько сложно сделать что-то с Linker в GWT. Идея высокого уровня будет:

1. Поместите все компоненты GWT через < DIV ID = «GWT»> ... </DIV>
2. Добавить линкера в файл GWT модуля, который будет обрабатывать CSS-файлы.
3. В компоновщике преобразуйте GWT CSS (например, standard.css), чтобы вставить #gwt перед каждым правилом выбора.

Первая часть проста, просто добавьте идентификатор к вашему корневому элементу.

Вторая часть также легко, просто добавить код, который выглядит, как это в файл Module.gwt.xml:

<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" /> 
<add-linker name="cssLinker"/> 

Твердая часть реализации компоновщик. Это можно сделать вручную, но вам может быть проще использовать что-то вроде SAC.

Используя Linker, вы можете преобразовать свой CSS, вставив #gwt перед каждым селектором. Используя SAC, вы можете сделать это, переопределив все методы DocumentHandler, чтобы просто выпустить каждый из своих аргументов в OutputStream. В DocumentHandler.startSelector() вы должны сначала выпустить «#gwt» перед каждым селектором.

[Изменить] Это предполагает, что стандарт GWT standard.css определяет стили, которые переопределяют стили бутстрапа. Если нет, вам, возможно, придется «улучшить» CSS GWT со значениями по умолчанию. Список рекомендованных по умолчанию W3C here.

Преимущество в том, что это устойчиво к будущему - если стили GWT меняются или стили бутстрапа меняются, это должно быть надежным.

Надежда, что помогает,

Адам

Answer 2

Вы можете просто добавить стиль к одному из ваших корневых объектов GWT, а затем просто переопределить стили начальной загрузки, чтобы удалить эти грязные границы:

<div class="gwt"> 
    ... some other GWT-content 
</div> 

и в вашем CSS:

.gwt tr, .gwt td { 
    border-top: 0px; 
} 

Из конечно, если вам нужно встроить некоторые элементы начальной загрузки в свои элементы GWT, тогда вам придется взломать и сделать:

<div class="gwt"> 
    ... some other GWT-content 
    <div class="bootstrap">... 
     ... Bootstrap elements 
    </div> 
</div> 

и в вашем CSS:

.bootstrap tr, .bootstrap td { 
    border-top: 1px; // Whatever bootstrap style puts 
}