How do we add a border to all VerticalLayout and HorizontalLayout in Vaadin Flow (Vaadin 14)?

Question

I'm basically trying to add a red border to all the layouts to try to figure out which layout is not setup as I expect. I see that it's possible as shown as the start of this video: https://www.youtube.com/watch?v=Efv_cPHEqdQ but when I try it doesn't work. I've also been referring to this video which seems to do it a bit differently: https://www.youtube.com/watch?v=Swki9XXs9SA I've also been looking through this documentation but it wasn't clear it didn't seem to work when I treated the layouts as components: https://vaadin.com/docs/latest/ds/customization/styling-components

I basically want to avoid adding a class to each layout in the code and have it go on globally. This way I can easily turn it on and off to debug layout issues.

Would it be possible in the answer to include an example. I tried to create a component css file as well as a layout/view css file but neither seemed to work. The css is as simple as border: 1px solid red; the only question is where is that located. Also I did create my own customTheme folder under frontend/themes/customTheme.

UPDATE As requested in the comments I'm adding what I attempted. At least what I can remember. I forgot all that I tried so this is just a sample of what I tried.

Added frontend/themes/myCustomTheme/components/vaadin-horizontal-layout.css which contained (based on documentation and what I did for textfields):

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

Added frontend/themes/myCustomTheme/layouts/views/layouts-view.css with the contents (based on the YouTube video https://www.youtube.com/watch?v=Efv_cPHEqdQ):

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

I then tried a number of permutations of the above along with a bunch of other things that I can't remember any more. Different file locations, naming conventions, etc. The links and videos seem to indicate different ways of doing things as well. I couldn't find instructions or examples online on how to do this for layouts as they seem and/or may be treated differently then components. For example I was able to make it work for other components using

frontend/themes/myCustomTheme/vaadin-text-field.css with the contents:

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

Answer 1

This solution requires an "application theme", which OP seems to already have in place. (This implies 14.6 on the current LTS line or the respective non-LTS-version).

Have a theme setup:

• @Theme(themeFolder = "app-theme")
• Folder in frontend (in your dev-root) or META-INF/resources in your classpath: themes/app-theme
• Add a theme for your HorizontalLayout relative to above path: components/vaadin-horizontal-layout.css with the following content:

  :host {
    border: 1px solid red;
  }