CODEWITHSUNDEEP
reactjsmaterial-ui
qrew
qrew

Reputation: 31

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

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:

Upvotes: 1

Views: 3536

Answers (2)

CodeFinity
CodeFinity

Reputation: 1340

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.

Upvotes: 1

qrew
qrew

Reputation: 31

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>

Upvotes: 1

Related Questions