@CssImport is applied to all pages?

Is that how its supposed to work?
I have one class with @CssImport and themeFor vaadin-radio-button.
Then i create a new page, dont use the @CssImport, yet my radio button is styled as the first page? How do i only make it apply to the class i’ve annotated

The CSS applies to all pages when imported, you will need to add class names or other selectors to differentiate between components. See https://vaadin.com/docs/latest/styling/getting-started/#styling.get-started.shadow-dom-styling

The problem I have is that I want to style the vaadin-radio-button within the radio group. I have no way to add class names to the buttons from the group object
also I can’t use the direct child css selector because the buttons have their own shadow as well as the group

image.png

vaadin-radio-group.buttons {
background: yellow;
}

vaadin-radio-group.buttons > vaadin-radio-button > label {
color: brown;
}

vaadin-radio-group.buttons > vaadin-radio-button::part(radio) {
background: purple;
}

vaadin-radio-group.buttons > vaadin-radio-button::part(radio)::after {
content: ‘\2713’;
color: black;
}

And then using radioButtonGroup.addClassName(“buttons”) in Java

i thought i understood shadow doms, but clearly i dont. i have no ide why that worked.

I thought all the components were isolated in their shadow doms and outside css doesnt affect them.

Cssimport and themeFor apply the css in the shadow Dom . So it’s isolated from the other components but it’s applied to all the instance of the component.

Thanks guys i understand it now. Got it working