[BUG] Version 4.7.6 breaks colors for selected item

[rogama25]

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?

• [X] Yes I use TypeScript

Steps to reproduce

1. Create a project with a <Select> using chakra-react-select 4.7.6
2. Set up styles changing chakraStyles for the optionMenu setting colors, as suggested in #99
3. Colors do not appear as expected
4. Change package.json to use version 4.7.5
5. Reinstall npm packages and reload
6. Working as expected

Operating System

• [ ] macOS
• [ ] Windows
• [X] Linux
• [ ] iOS/iPadOS
• [ ] Android

Additional Information

This might be related to some cleanup that was done to aria props and styles (maybe this commit 8ddad8211dcebf8bca7f356b3c830c6177287e49)

[csandman]

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.

[csandman]

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.