In the Vaadin Starter, we have selected the input-field with the white background, which results in a frontend/styles/shared-styles.js file with the necessary <dom-module> + themes/styles. Looks great.
We now have a language selector component that lives in the footer, which had a light grey background color. We would now like to color this specific with the same light grey.
When looking at the various elements of the , it is not immediately obvious 1) which sub-elements to color and 2) how to actually do that for this <vaadin-select>-based component.
To import this and Tareks CSS you’ll need to annotate your language selector component class with @CssImport(value = "./styles/customSelect.css", themeFor = "vaadin-select")
To import this and Tareks CSS you’ll need to annotate your language selector component class with @CssImport(value = “./styles/customSelect.css”, themeFor = “vaadin-select”)
Just to note, the styling I suggested doesn’t have to be in a vaadin-select style module, since the vaadin-item is in the light DOM. That is, it would be enough to apply the styles I suggested in a CSS file imported like so:
I’m not sure I understand, but in a Fusion (18.0.6) project, when I add a Select (like the first example [here]
(https://vaadin.com/docs-beta/latest/ds/components/select/)), give it a theme attribute: theme="my-styled-select", and I add the following style to shared-styles.js