如何更改 react-select Select 元素的边框？

Question

I need to change the color of the border when the dark mode is active on my application, but i can't change the border color because it doesn't change with inline styling. This is the code i have.

<Select 
    onChange={(e) => filtrarRegiao(e.value)} 
    placeholder="Filter by region"
    className={darkModeOn ? 'dark-lista' : 'lista'}
    style={{  }}
    styles={customStyles}
    components={{ ValueContainer, Placeholder, IndicatorsContainer, Group }}
    options={regions} 
/>

Answer 1

Please checkout this codesandbox link.

https://codesandbox.io/s/heuristic-shockley-02c9z?file=/src/App.js

After reading the official documentation, you need to pass object with

{control:()=>{ return { border: "1px solid black" } }}

to styles to use customize styles.