react input type range inline css

Question

I have an input with the type "range" in my react app.

I also have a .scss file where I style this input like this:

input {
    width: 100%;
    height: 0.15rem;
}

input[type='range'] {
    -webkit-appearance: none;
    border: none;
    outline: none;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    background: black;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}

but now I want to set the background and border of the ::-webkit-slider-thumb not in the .scss file but in my InputRangeComponent.tsx file.

How can I do that?

Because I think I can't just do it like this:

<input style={{::-webkit-slider-thumb-background: black}} >

right?

I tried this:

<input style={{::-webkit-slider-thumb-background: black}} >

and this:

const style = { ::-webkit-slider-thumb { background: black } } and then <input style={style} />