如何在Ant design v4中动态切换主题？

Question

我想用Ant design v4实现动态切换暗/亮主题。

可以使用其他CSS / LESS导入自定义主题，如下所示：https://ant.design/docs/react/customize-theme#Use-dark-theme

但是我不确定如何从代码中动态切换这些主题。我的React应用程序（darkMode）中有一个变量，该变量指示当前是否使用深色主题。更改此变量后，我必须提供正确的CSS文件。但是我不能仅在满足某些条件时动态地导入CSS，因为导入的方式并不可行。

我试图对require进行一些混乱，例如下面的代码，但这是一种非常非常糟糕的方法，并且仍然无法正常工作（因为注入了CSS，但可能没有撤回。）：

const Layout = () => {
  ...
  useEffect(() => {
    if (darkMode === true) {
      require("./App.dark.css")
    } else {
      require("./App.css")
    }
  }, [darkMode])

  return (
    <Home />
  )
}

应该可以以某种方式切换主题，因为它已经在Ant设计文档（https://ant.design/components/button/）中实现：

你知道如何做吗？

谢谢！

Answer 1

1. 在运行时使用较少的编译器：https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0

2. 将更少的代码导入包装器https://github.com/less/less.js/issues/3232

.any-scope {
    @import url('~antd/dist/antd.dark.less');
}