Блог

Главная - Вопросы по программированию - Реагируйте на материал и Тематизируйте | Как увеличить продолжительность перехода при переключении темы?

Реагируйте на материал и Тематизируйте | Как увеличить продолжительность перехода при переключении темы?

#reactjs #material-ui

Вопрос:

Я создаю светлую/темную тему, используя React MaterialUI.

Вопрос: Есть ли возможность снизить скорость перехода к теме вместо мгновенного перехода ?

Проблема:

  • Я уже пробовал встроенный стиль со стилем={{переход: «все 1s линейные}} в родительском div, но он работает только с цветом текста, а не с цветом фона (все равно переключается мгновенно)
  • Я также попытался переопределить длительность переходов в createMuiTheme({переходы: { / / }}), но это не возымело никакого эффекта

Комментарии:

1. Работает ли добавление свойства перехода к элементу тела в глобальном файле CSS?

2. @Calvin Большое спасибо! Он работал со свойством «переопределяет» внутри createMuiTheme({/ /}) <CssBaseline />. ПРИМЕЧАНИЕ: Мне пришлось добавить дополнительный встроенный стиль для <AppBar />, не знаю, почему этот компонент не наследуется от перехода тела …

Ответ №1:

решенный

Если вы используете CssBaseline для сброса глобального стиля, вы также можете определить новые правила внутри createMuiTheme({}) для определения глобального тела {переход: «все 0,5 с линейно»}.

  • Глобальный сброс Css с помощью 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>
);

    }

  • Новые глобальные css «переопределения» внутри 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',
          },
        },
      },
    },
  });
 };

ПРИМЕЧАНИЕ: вам может потребоваться дополнительный встроенный стиль для определенных элементов (панель приложений в моем случае).

     <AppBar
      position='static'
      color='default'
      elevation={1}
      style={{ transition: 'all 0.3s linear' }}>
      {/* */}
    </AppBar>
Метки: