How can I apply custom styles to the select dropdown without affecting other MUI components, like the show/hide columns panel?

I’m trying to add custom styles to the dropdown panel of my MUI select component. I want the dropdown to look like this:
Desired show/hide columns example

To do this, I added the following styles to the MuiList in my ThemeManager:

    MuiList: {
      styleOverrides: {
        root: {
          'backgroundColor': 'var(--main-color)',
          'color': 'var(--text-color-light)',
          'border-width': 'none !important',

          '& .Mui-selected': {
            backgroundColor: '#dddddd !important',
            'color': 'var(--primary-color-hover) !important',
            borderBottom: '1px solid #26586B',
            '&:hover': {
              backgroundColor: 'var(--main-color) !important',
              color: 'var(--primary-color-hover) !important',
            },
          },
...

However, this change is also affecting other MUI components, like the "Show/Hide Columns" panel in a data table, which looks like this:
Custom dropdown style
The issue is that I can’t add a unique id or className to the dropdown panel, as it’s dynamically generated by MUI. This results in the ThemeManager styles being applied to both the select dropdown and other components, like the columns panel, which I don’t want.

In the end, this is how the columns panel looks with the ThemeManager styles applied, which is not what I want:
Incorrectly styled show/hide all panel

Is there a way to target only the select dropdown for styling without affecting other MUI components like the show/hide columns panel?

You need to sign in to view this answers

Related Post