Question

在React 16.7 CRA中，是否有任何方法可以在运行时更改Ant设计主题。 Config-overides.js文件看起来像这样

const { override, fixBabelImports } = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
addLessLoader({
   javascriptEnabled: true,
   modifyVars: { '@primary-color': '#1DA57A' },
 })
 );

此代码将颜色更改为静态，但如何将其更改为动态

Answer 1

是的，现在可以使用antd-theme-webpack-plugin。您可以在live demo how it works的源代码中看到（通过调用window.less.modifyVars(vars)）。

如存储库中所述，webpack插件会注入一个javascript文件，从而使您的应用程序可以像动态修改较少的变量那样工作。还要注意，如存储库中所述，如果您的Webpack没有生成HTML，则需要手动对其进行修改以包括库和适当的script文件。

Answer 2

另一种实现此目的的方法是仅针对暗模式创建另一组CSS，并对它们进行范围划分。

较少的编译器以某种方式处理此问题，但是您需要特别注意在代码中提供较少的文件进行编译的顺序。您可能需要为此尝试并出错。基本思想是：

import './styles/dark.less';
import './styles/index.less';

在黑暗中。更少的你会有更多或更少

[data-theme^="dark"] {
  @import "./your.less";   
}

现在，您可以通过在根html标记中分配值来动态选择模式。为此，此链接可能会有所帮助：https://medium.com/missive-app/make-your-electron-app-dark-mode-compatible-c23dcfdd0dfa

是否可以将Ant设计主题更改为动态

2 个答案: