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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

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

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

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

Преимущество заключается в том, что это устойчиво к будущему - если стили 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
}