Как добавить границу ко всем VerticalLayout и HorizontalLayout в Vaadin Flow (Vaadin 14)?

Question

Я в основном пытаюсь добавить красную рамку ко всем макетам, чтобы попытаться выяснить, какой макет настроен не так, как я ожидал. Я вижу, что это возможно, как показано в начале этого видео: но когда я пытаюсь, это не работает. Я также имел в виду это видео, которое, кажется, делает это немного иначе: https://www.youtube.com/watch?v=Swki9XXs9SA Я также просматривал эту документацию, но не было ясно, что это не так. Кажется, не работает, когда я рассматривал макеты как компоненты: https://vaadin.com/docs/latest/ds/customization/styling-components

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

Можно ли в ответ включить пример. Я попытался создать компонентный файл css, а также файл макета / представления css, но ни один из них, похоже, не работал. CSS так же прост, как border: 1px solid red;вопрос только в том, где это находится. Также я создал свою собственную папку customTheme под frontend/themes/customTheme.

ОБНОВЛЕНИЕ По просьбе комментариев я добавляю то, что пытался. По крайней мере, что я могу вспомнить. Я забыл все, что пробовал, так что это всего лишь образец того, что я пробовал.

Добавлен frontend/themes/myCustomTheme/components/vaadin-horizontal-layout.css который содержал (на основе документации и того, что я сделал для текстовых полей):

      [part="horizontal-layout"] { 
    border: 1px solid red; 
} 

Добавлен frontend/themes/myCustomTheme/layouts/views/layouts-view.cssс содержанием (на основе видео YouTube https://www.youtube.com/watch?v=Efv_cPHEqdQ,https://www.youtube.com/watch?v=Efv_cPHEqdQ):

      vaadin-vertical-layout, vaadin-horizontal-layout {
    border: 1px solid red;
}

Затем я попробовал несколько вариантов вышеупомянутого, а также множество других вещей, которые я больше не могу вспомнить. Различное расположение файлов, соглашения об именах и т. Д. Ссылки и видео, кажется, также указывают на разные способы работы. Я не смог найти в Интернете инструкций или примеров того, как это сделать для макетов, поскольку они кажутся и / или могут обрабатываться иначе, чем компоненты. Например, я смог заставить его работать для других компонентов, используя

frontend/themes/myCustomTheme/vaadin-text-field.css с содержанием:

      [part="input-field"] {
    background-color: white;
    border: 1px solid #c5c5c5;
}

Answer 1

Для этого решения требуется «тема приложения», которая, похоже, уже есть у OP. (Это означает 14.6 в текущей строке LTS или соответствующей версии, отличной от LTS).

Настройте тему:

• @Theme(themeFolder = "app-theme")
• Папка в frontend (в вашем dev-root) или META-INF/resources в вашем пути к классам: themes/app-theme
• Добавьте тему для своего HorizontalLayout относительно пути выше: components/vaadin-horizontal-layout.css со следующим содержанием:

          :host {
    border: 1px solid red;
  }