can't override outline, marked as important

I am very new to the issues/bug/feature thing, so sorry if i mark it as the wrong thing or if its not the correct place to be posting/asking this.

i wanted to override the outline property of react-selectV2 and couldn’t do it because it is marked as outline : 0 !important

i want to do it with css only, inline styles is not an option for us. this is the style that i used to override the css, but emotion, shows up below my custom css in the index html so i can’t seem to override it.

.react-select__control--is-focused{
    outline:2px dotted  !important;
    outline-offset:1px;
    }

so the first red boundary is my css and the second red boundary is the provided emotion css also, in the screenshot there is no important, because i edited it using chrome devTools, sorry for posting a misleading image.

it would be great if you could consider removing that !important from there or if there is another way to override this using css please inform me about it? Thanks

[amaan75]

Umm, i actually wrote that because it wasn’t working, so as a workaround i was using focus and blur event to add a new css class to it which would use the outline on the react-select-container. And i just copied the css from the compiled css from scss and that works. But the question still remains is the !important in outline by default really required?

[bladey]

Thanks for the reply @Rall3n!

@amaan75 if this doesn’t help please let us know and we’ll re-open the issue.