Question

我想在我的新React Web应用程序中使用这个深色主题：https://github.com/ant-design/ant-design-dark-theme

遵循自定义主题here的说明和自述文件here中应用主题的说明之后，我的config-overrides.js如下所示：

  ConfigLambdaPermission:
    Type: "AWS::Lambda::Permission"
    DependsOn:
    - MyApiName
    - MyLambdaFunctionName
    Properties:
      Action: lambda:InvokeFunction
      FunctionName: !Ref MyLambdaFunctionName
      Principal: apigateway.amazonaws.com

这似乎不起作用。例如，我有一个菜单antd组件仍然以“浅色”主题而不是“深色”主题显示。

我想让我所有的antd组件都以深色主题呈现，而无需我明确设置它。那可能吗？如果是，我在做什么错了？

这里不是前端开发人员，因此，如果我缺少明显的内容，请告诉我。

Answer 1

对我有用的解决方案是@JoseFelix和@Anujs答案的组合。谢谢你们的回答：

const darkTheme = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme.default
  }),
);

Answer 2

当默认导出是带有变量的对象时，代码将破坏默认导出。因此，应该是：

const darkTheme = require('@ant-design/dark-theme').default;
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme
  }),
);

Answer 3

如果您管理已导入的日志darkTheme变量，则所有样式变量都存在于darkTheme.default对象中。我已经实现了他们的aliyum-theme。

因此，要使代码正常工作，您需要将modifyVars文件中的config-overrides.js更改为

const { darkTheme } = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {...darkTheme.default}
  }),
);

ProTip：要在应用程序中覆盖darkTheme，您可以创建自己的JavaScript文件并将其导入config-overrides.js文件中，并在modifyVars中进行销毁

Answer 4

以前的答案对我不起作用。如果对其他人有帮助，这对我是有用的。我认为这是由于新的较少加载程序版本和/或antd打包方式的更改（我真的不确定）。

const { getThemeVariables } = require("antd/dist/theme");
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        ...getThemeVariables({
          dark: true,
          compact: true,  // optional
        }),
      },
    },
  })
);

如何为React App应用antd dark主题？

4 个答案: