Targeting same component with different style in css theme file

Hi
I want to change the look and feel of the slider in perspective and for that my only choice is to
manipulate it in light css theme file which is easy.
The problem is if I want to style it with more than one style config it is not possible.
For example, imagine I have two sliders in my view.
For one I want to make the border size of the handle 2px and another one is 3px.
Changing border size of the handle is not possible in component props.style section. So I have to change it in css global theme file.

.ia_slider__handle {

border-radius: 50%;

border: solid 1px var(--border);

background-color: var(--container);

}

But for each component type, I can only define one style type.
So how can I target different instances of the same component in CSS file?
Is it possible to give perspective component ID and target it in the global CSS file?

I find the solution with CSS specificity:

3 Likes