Chakra-UI Menu colors override causes breaking of selected item colors fix

[intivillca]

Hello,

I had to override chakra-ui default colors for Menu component. This in turn caused chakra-react-select components to lose their selected colors. Does anybody know of a global fix which could be applied on all Select components? The solution mentioned inside docs is either applying a chakraStyles or adding classes and then styling with CSS. The second option seems to be easier to implement globally, but I'm wondering has anyone found an easier, more clean fix?

This is an example of the issue, the selected item has black color:

This is the code that changed the colors, it's applied on the Menu component globally

return definePartsStyle({
    list: {
      color: brandColors.fontDark,
      bg: brandColors.background,
      _dark: {
        bg: brandColors.backgroundDark,
        color: brandColors.fontLight,
      },
    },
    item: {
      _hover: { bg: brandColors[100], _dark: { bg: brandColors[600] } },
      _focus: { bg: brandColors[100], _dark: { bg: brandColors[600] } },
      bg: brandColors.background,
      _dark: {
        bg: brandColors.backgroundDark,
      },
    },
  });

[csandman]

It's hard to tell exactly what the issue is, but it seems to be a problem with certain styles getting priority where they shouldn't be. Which style specifically is not working right? Should the Nizak option at the bottom have a lighter background color?

And a couple follow up questions:

• What do you have for the selectedOptionColorScheme prop? is it a color from your theme? Do you have a .300 value for it in your them?
• Is your app in dark mode? It appears to be but I can't tell if you're using Chakra's built in dark mode.

Also, do you think you could provide a reproduction in CodeSandbox? I'd be happy to take a more in depth look but it's hard to tell exactly what's going on without that.

[intivillca]

Hi thanks for the reply,

Here is the CodeSandbox. To answer your questions:

• I have "brand" for selectedOptionColorScheme, there exist a .300 value. It works great with Chakra Defaults, the problems happens when I try to override Chakra colors. Specifically I changed background color inside Chakra Menu.
• It is in dark mode, not the built in Chakra Dark mode, as stated before it was changed inside theme config to brand dark mode colors.

[csandman]

Thanks so much for the example, that's way more than most people have given me! Usually when I ask for an example I never get a response haha.

So I spent some time looking through it, and I realized that the issue comes down to the _dark pseudo selector. I've actually never used it before, instead relying on the useColorModeValue for all of the color mode based styles I was applying to the internal components of chakra react select.

And the reason this selector is causing a problem is because of how specific the generated css becomes. Here's an example on the selected option, where the theme css is overriding the option's sx prop.

.chakra-ui-dark .css-5isrf1:not([data-theme]), [data-theme=dark] .css-5isrf1:not([data-theme]), .css-5isrf1[data-theme=dark] {
    background: #414141;
}

I actually think this should involve a change on my end. Considering they're using the _dark selector in their built in theme now, it's probably time I do the same. Last I remember, they were using the mode utility function to determine these colors, which added no extra specificity.

However, it will probably take me a bit of time to implement this across this whole package, and do some testing to make sure it doesn't break people's projects (although it probably will anyway).

In the mean time, I have a could solutions you could try if you want to get a fix in quickly.

The first is using CSS, like you said, to easily apply a fix globally. In order to do so, you'll first have to add the classNamePrefix class to your Select component:

<Select classNamePrefix="chakra-react-select" />

This ensures a standardized class name is added to each of the subcomponents that made up react select. Next you'll need to add some global CSS styles (or wherever you're using the select) to style the background:

.chakra-react-select__option--is-selected {
  background: var(--chakra-colors-brand-500) !important;
}

.chakra-ui-dark .chakra-react-select__option--is-selected {
  background: var(--chakra-colors-brand-300) !important;
}

I actually tried doing quite a few combinations of selectors for these to get the color to apply without using !important, but like I said, the _dark selector generates a super high specificity.

This solution is, like you said, much easier to implement globally as you only have to ensure the classNamePrefix prop is added to each of your Select instances.

The second solution is to use chakraStyles. This is pretty simple to implement, but is also something you'd have to do in multiple places most likely. You could make a reusable chakraStyles object, but considering you're using TypeScript, this can be annoying as the option types have to match between the styles object and the select instance. That is, unless you use any for the option type on the styles, which is a fine approach.

Here's an example of the chakraStyles approach:

const selectedOptionBg = useColorModeValue("brand.500", "brand.300");

return (
  <Select
      chakraStyles={{
        option: (provided, { isSelected }) => ({
          ...provided,
          bg: isSelected ? `${selectedOptionBg} !important` : undefined,
        }),
      }}
  />
)

With this approach, you could alternatively try and apply the styles using _dark inside the chakraStyles object, but I messed around with it a bit and it started getting complicated, so I figured I'd leave you with this for now.

Here's a complete CodeSandbox example with both of these approaches implemented: https://codesandbox.io/p/sandbox/kind-snowflake-pzf3z9?file=%2Fsrc%2FContent.tsx%3A29%2C32

And I will definitely keep you updated on the progress of implementing a real solution in the original package!

[intivillca]

Thank you very much for the detailed answer, support and such a great lib. I will probably delay the changes to branding dark theme. We waited for a long time for nicer Chakra theming options, we can wait a bit more for this.

If I do decide to implement the fix I will personally go for the chakraStyles solution because we already often use it to change zIndex on Selects in Modals. I think it's equally time consuming to either add a chakraStyles or CSS fix. Both require a line of code on every Select. This doesn't sound that much but multiply it many times and it becomes tiresome.

Example provided below for the current fix I use on most of my components:

export const selectStyles: ChakraStylesConfig<any, false | true> & {
  menuPortal: (
    provided: SystemStyleObject,
    state: ComponentProps<any>
  ) => SystemStyleObject;
} = {
  menuPortal: (provided) => ({
    ...provided,
    zIndex: 8000,
  }),
  option: (provided) => ({ ...provided, whiteSpace: 'pre-wrap' }),

One more question, have you considered maybe adding a global config? I have no idea how complicated or problematic it is, so sorry if I'm asking for too much. I could look into it if you are not interested, because I personally would really like this feature.

Once again thank you very much for this great lib.

[csandman]

Ok I actually have an alternative solution that could work for you! I was looking at Chakra's own Menu component and wondering why the _dark styles they have applied don't override the style props or sx props you add directly to the components. Like this, where I'm focusing the menu item:

And I checked the styles and realized, that's probably the whole reason they started using the cssVar utility function to add component scoped css variables. When you add a custom style on the component itself, it just overrides the base style which was previously referencing the css variable.

Before the custom style

After the custom style

If you take a look at their theme file for the Menu, you can see what they're doing: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts

So you may want to considering doing something like this with your own theme. Not just to allow chakra-react-select to internally override the styles, but also so you can override the styles in your own code in cases where you might need to.

Here's an example of how you could change your theme to make this work properly (I expanded it a bit while changing it so I could read it a little more easily haha):

const $bg = cssVar("menu-bg")

const baseStyle = (brandColors: BrandColors) => {
  return definePartsStyle({
    list: {
      [$bg.variable]: brandColors.background,
      _dark: {
        [$bg.variable]: brandColors.backgroundDark,
      },
    },
    item: {
      [$bg.variable]: brandColors.background,
      _dark: {
        [$bg.variable]: brandColors.backgroundDark,
      },
      _hover: {
        [$bg.variable]: brandColors[100],
        _dark: {
          [$bg.variable]: brandColors[600]
        }
      },
      _focus: {
        [$bg.variable]: brandColors[100],
        _dark: {
          [$bg.variable]: brandColors[600]
        }
      },
    },
  });
};

And another CodeSandbox with a functional example: https://codesandbox.io/p/sandbox/wnnfkt?file=%2Fsrc%2FMenuConfig.tsx%3A8%2C1-37%2C3

Let me know if a solution like this might work for you! I'm still considering adjusting the component styles internally, but I'm a bit wary of it as it might start overriding others' styles because of that increased specificity.

[intivillca]

This solves it for me, thank you very much.