React MaterialUI Theming | How to increase transition duration when switching theme? - reactjs

Question

I am making a light/dark theme using React MaterialUi.
Question: Is there any possibility to ease theme transition speed instead of instant transition ?
Problem:
I've already tried inline styling with style={{transition: "all 1s linear}} in the parent div but it only works on text color and not the background color (still switches instantly)
I also tried to override transitions duration in createMuiTheme({transitions: {/ /}}) but it has no effect

Answer 1

SOLVED
If you are using CssBaseline to reset global styling, you can also define new rules inside createMuiTheme({}) to define a global body {transition: "all
0.5s linear"}.
Global Css reset with CssBaseline
export default function Layout({ children }) {
const {
state: { darkMode },
} = useContext(AppContext);
const theme = darkTheme(darkMode);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<div
style={{
minHeight: '100vh',
boxSizing: 'border-box',
}}>
<Navbar />
{children}
</div>
</ThemeProvider>
);
}
New Global css "overrides" inside createMuiTheme()
export const darkTheme = (dark: boolean): ThemeOptions => {
const paletteColors = dark ? paletteColorsDark : paletteColorsLight;
return createMuiTheme({
palette: {
type: dark ? 'dark' : 'light',
primary: {
main: paletteColors.primary,
},
secondary: {
main: paletteColors.secondary,
},
/////// IMPORTANT PART //////////////////////////////////////////
},
overrides: {
MuiCssBaseline: {
'#global': {
body: {
transition: 'all 0.3s linear',
},
},
},
},
});
};
NB: you may need some extra inline styling for specific elements (AppBar in my case)
<AppBar
position='static'
color='default'
elevation={1}
style={{ transition: 'all 0.3s linear' }}>
{/* */}
</AppBar>

Answer 2

body {
transition: all 0.25s ease-in-out;
}
Add this to your top-level CSS import. This might be an index.css and then import "./index.css"; is in the main.jsx (or wherever you have stuff like: <React.StrictMode>).
I see this was covered in the comments in the original question.