我目前有一个在深色和浅色主题之间切换的开关，它运行良好。

我把它设置成这个形状：

const dark = createTheme({
  palette: {
    type: "dark",primary: {
      main: MYCOLORS.dback,},});

const light = createTheme({
  palette: {
    type: "light",primary: {
      main: "yellow",});

function App() {
  const [darkTheme] = useAtom(darkThemeAtom); // useAtom is just a simple state lib not that relevant to this question
  const appliedTheme = createTheme(darkTheme ? dark : light);

  return (
    <>
      <ThemeProvider theme={appliedTheme}>
        <CssBaseline />
        <MyComponentA />
        <MyComponentB />
      </ThemeProvider>
    </>
  );
}

我的问题是，如何在我的所有组件中应用明暗主题之间的过渡效果？

如果只是 css，那么我可以简单地这样做：https://www.w3schools.com/css/css3_transitions.asp..。

非常感谢您的帮助！