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

Question

我正在使用React MaterialUi制作一个亮/暗主题。

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

问题：

• 我已经尝试过在父div中使用style={{transition:"all1s linear}}的内联样式，但它只适用于文本颜色，而不适用于背景颜色(仍然会立即切换(

• 我还试图在createMuiTheme中覆盖转换持续时间(｛transitions:{//}｝(，但它对没有影响

Answer 1

已解决

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

• 使用CsBaseline 重置全局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>
  );
  

  }

• 新建全局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(

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

Answer 2

body {
transition: all 0.25s ease-in-out;
}

将其添加到您的顶级CSS导入中。这可能是一个index.css，然后import "./index.css";在main.jsx中(或者在任何有类似<React.StrictMode>的东西的地方(。

我看到这已经包含在最初问题的评论中了。