'Material UI - Custom Select icon with custom themes

I'm creating a custom Material UI theme for my React application :

import {createTheme, Theme, ThemeOptions, ThemeProvider, useMediaQuery} from "@mui/material";
import {Components} from '@mui/material/styles/components';
import {FunctionComponent, PropsWithChildren, useMemo} from 'react';
import {select} from './select';
import {darkColors, lightColors} from './colors';

const components: Components<Theme> = {
  MuiSelect: select
}

const lightThemeOptions: ThemeOptions = {
  palette: lightColors,
  components
};

export const lightTheme = createTheme(lightThemeOptions);

const darkThemeOptions: ThemeOptions = {
  palette: darkColors,
  components
};

export const darkTheme = createTheme(darkThemeOptions);

// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface SystemThemeProps {
}

export const SystemThemeProvider: FunctionComponent<PropsWithChildren<SystemThemeProps>> = ({children}) => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const systemTheme = useMemo(() => prefersDarkMode ? darkTheme : lightTheme, [prefersDarkMode]);
  return (
    <ThemeProvider theme={systemTheme}>{children}</ThemeProvider>
  );
};

And here is my select file :

import {Theme} from '@mui/material'
import {ComponentsOverrides} from '@mui/material/styles/overrides';
import {ComponentsProps} from '@mui/material/styles/props';
import {ComponentsVariants} from '@mui/material/styles/variants';

type MuiSelect = {
  defaultProps?: ComponentsProps['MuiSelect'];
  styleOverrides?: ComponentsOverrides<Theme>['MuiSelect'];
  variants?: ComponentsVariants['MuiSelect'];
}

export const select: MuiSelect = {
  styleOverrides: {
    icon: ({ownerState, theme}) => ({
      color: 'red'
    })
  }
}

So with that code, I can see the select native icon displayed with red color. So I think I've targeted the right classes to change.

However I have no idea how I can say that I don't want to use the native css but instead I want to load a JPEG file.

I guess I'll have one more class to target for the "open" state of the select.

Can you help ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source