Open rogama25 opened 8 months ago
Sorry for the late response!
Yes I see your point, the styles passed in chakraStyles
should generally override the built-in styles, meaning I should switch back from using the pseudo selectors as they increase specificity. I've been very busy recently but I'll get to this soon.
So I'm working on a new version that will solve this, but I'm also integrating the new accessibility changes react-select implemented recently. But in both cases (now and after the new version), you can implement these styles by using the _selected
pseudo selector:
chakraStyles={{
option: (provided) => ({
...provided,
_selected: {
backgroundColor: "pink",
color: "orange",
},
}),
}}
I plan to also reduce the specificity of the built in styles so this isn't an issue, but this fix should work now.
Description
Version 4.7.6 overrides your set colors for the selected elements through aria-selected css selector while I think it shouldn't. Reverting to 4.7.5 works as expected, according to #99
4.7.5:
4.7.6:
chakra-react-select Version
4.7.6
Link to Reproduction
https://codesandbox.io/p/sandbox/test-dropdown-ftll7r?file=%2Fpackage.json
TypeScript?
Steps to reproduce
<Select>
using chakra-react-select 4.7.6Operating System
Additional Information
This might be related to some cleanup that was done to aria props and styles (maybe this commit 8ddad8211dcebf8bca7f356b3c830c6177287e49)