Editing CSS shadow part of an ionic select text (color) without affecting other instance of ion select

Ionic Framework Ionic React
1

I am trying to edit the color of inside text of an ion select when i pick an option, but once i edit the shadow part in the component, the rest of the ion selects (in other components) are taking this change. I just want to encapsulate this color change, but i can not without editing the shadow part and affecting the rest as they have different colors.
I have tried to put them in different css files but i doesnt work of course.
Example, i have an ion select in a component with this css

ion-select::part(text){
    font-weight: 900;
    color: white;
}

but it gets overwritten with the css of another component that i edit

ion-select::part(text){
    font-weight: 900;
    color: #c00000;
}

Any help with CSS shadow parts it’s appreciate it

2

maybe assign a class to the selector you like to change, and use the class selector in css to target the shadow part of that selected class?

1 Like
3

I tried this but the shadow dom doesnt pick it up


.selector-red ion-select::part(text){
    font-weight: 900;
    color: #c00000;
}
4

I found the right way to do it, with a class selector (i didnt know this) selector-red in this case would be the class name

ion-select.selector-red::part(text){
    font-weight: 900;
    color: #c00000;
}
1 Like