KevinVandy
MRT `background-color` not switched by MUI's `useColorScheme()`-hook
material-react-table version
3.2.1
react & react-dom versions
19.1.1
Describe the bug and the steps to reproduce it
According to https://mui.com/material-ui/customization/dark-mode/, we can set the light/dark-theme by using something like:
const muiTheme = createTheme({
palette: {
mode: 'dark',
},
});
createRoot(document.getElementById('root') as HTMLDivElement).render(
<React.StrictMode>
<ThemeProvider theme={{ [THEME_ID]: muiTheme }} disableTransitionOnChange noSsr>
<CssBaseline />
<App />
</ThemeProvider>
</React.StrictMode>
The App component renders a simple <MaterialReactTable> component.
Everything works, and the <MaterialReactTable> correctly adapts the palette.mode theme (i.e., the MRT uses the black theme as defined globally).
However, it seems that MRT does not use the theme when provided with colorSchemes API (see https://mui.com/material-ui/customization/dark-mode/). According to its documentation:
The colorSchemes API is an enhanced version of the earlier and more limited palette API—the aforementioned features are only accessible with the colorSchemes API, so we recommend using it over the palette API. If both colorSchemes and palette are provided, palette will take precedence.
Minimal, Reproducible Example - (Optional, but Recommended)
define in index.tsx:
...
import ThemeSwitcher from 'ThemeSwitcher';
...
const muiTheme = createTheme({
colorSchemes: { light: true, dark: true },
cssVariables: {
colorSchemeSelector: '.theme-%s'
},
});
createRoot(document.getElementById('root') as HTMLDivElement).render(
<React.StrictMode>
<ThemeProvider theme={{ [THEME_ID]: muiTheme }} disableTransitionOnChange noSsr>
<CssBaseline />
<App />
<ThemeSwitcher toggle={true} />
</ThemeProvider>
</React.StrictMode>
defined in ThemeSwitcher.tsx:
import Box from '@mui/material/Box';
import FormLabel from '@mui/material/FormLabel';
import { useColorScheme } from '@mui/material/styles';
import { Checkbox, MenuItem, Select, SelectChangeEvent, useMediaQuery } from '@mui/material';
import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
type ThemeMode = 'light' | 'dark' | 'system';
enum ThemeModeEnum {
LIGHT = 'light',
DARK = 'dark',
SYSTEM = 'system',
};
interface ThemeSwitcherProps {
toggle: boolean;
}
export default function ThemeSwitcher({ toggle }: ThemeSwitcherProps) {
const { mode, setMode } = useColorScheme();
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
function handleToggleChange(event: React.ChangeEvent<HTMLInputElement>) {
setMode(event.target.checked ? ThemeModeEnum.LIGHT : ThemeModeEnum.DARK);
}
function handleSelectChange(event: SelectChangeEvent) {
setMode(event.target.value as ThemeMode);
}
function SelectMenu() {
return (
<>
<FormLabel id="theme-select-label">Theme ({prefersDarkMode ? 'dark preferred' : ''})</FormLabel>
<Select
labelId="theme-select-label"
id="theme-select"
label="Theme"
value={mode}
onChange={handleSelectChange}
>
<MenuItem value={ThemeModeEnum.SYSTEM}>System</MenuItem>
<MenuItem value={ThemeModeEnum.LIGHT}>Light</MenuItem>
<MenuItem value={ThemeModeEnum.DARK}>Dark</MenuItem>
</Select>
</>
)
}
function CheckBox() {
return (
<Checkbox
checked={mode === ThemeModeEnum.LIGHT}
onChange={handleToggleChange}
icon={<DarkModeOutlinedIcon />}
checkedIcon={<LightModeOutlinedIcon />}
/>
)
}
return mode && (
<Box>
{toggle ? <CheckBox /> : <SelectMenu />}
</Box>
)
}
The App component renders a simple <MaterialReactTable> component.
You can also set up a simple theme switcher by using the example from https://mui.com/material-ui/customization/dark-mode/.
You'll notice that MRT updates its theme as specified by MUI's useColorScheme() hook, BUT the background-color of the MRT table isn't updated accordingly. Therefore, when switching to the dark theme, the background-color of the MRT table isn't inverted (i.e., it remains white), while its contents are correctly inverted (i.e., switched to dark colors).
I tried a workaround by using this when setting <MaterialReactTable> component.:
..
const table = useMaterialReactTable({
columns,
data,
mrtTheme: (theme) => ({
baseBackgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000'
}),
});
return <MaterialReactTable table={table} />
But it doesn't work either.
To sum up:
MRT should change its paper background-color according to the current MUI theme (e.g., by observing theme.palette.mode which can be changed by useColorScheme()-hook or by reading css prefers-color-scheme).
Screenshots or Videos (Optional)
MRT in light mode is shown correctly - background-color is light/white):
MRT in dark mode is not shown correctly - background-color is stilll light/white while its table content/color is correctly inverted:
Do you intend to try to help solve this bug with your own PR?
None
Terms
- [x] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Ok, I found out that such a issue already exists in https://github.com/KevinVandy/material-react-table/issues/1429..It may be a little different, but the root cause seems to be the same...if so then please close this issue.
