React MaterialUI 主题 |切换主题时如何增加过渡持续时间？答案

【问题标题】：React MaterialUI Theming | How to increase transition duration when switching theme?React MaterialUI 主题 |切换主题时如何增加过渡持续时间？
【发布时间】：2021-09-01 12:45:17
【问题描述】：

我正在使用 React MaterialUi 制作明暗主题。

问题：是否有可能减轻主题转换速度而不是即时转换？

问题：

我已经尝试过在父 div 中使用 style={{transition: "all 1s linear}} 的内联样式但它只适用于文本颜色，而不适用于背景颜色（仍然会立即切换） >
我也尝试在 createMuiTheme({transitions: {/ /}}) 中覆盖过渡持续时间，但没有效果

【问题讨论】：

向全局 CSS 文件中的 body 元素添加过渡属性是否有效？
@Calvin 非常感谢！它与 createMuiTheme({/ /}) + 中的“覆盖”属性一起使用。注意：我必须为添加额外的内联样式，不知道为什么这个组件不继承自 body 转换 ...

标签： reactjs material-ui

【解决方案1】：

已解决

如果您使用 CssBaseline 重置全局样式，您还可以在 createMuiTheme({}) 中定义新规则来定义全局主体 {transition: "all 0.5s 线性"}.

使用 CssBaseline 重置全局 Css

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>
);

}

createMuiTheme() 中的新全局 css“覆盖”

  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）

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

【讨论】：