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

【问题标题】：How to apply antd dark theme for a React App?如何为 React App 应用 antd dark 主题？
【发布时间】：2020-05-01 18:58:27
【问题描述】：

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

按照关于自定义主题 here 的说明和在 README here 中应用主题的说明后，我的 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
  }),
);

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

我希望我的所有 antd 组件都使用深色主题进行渲染，而无需我明确设置它。那可能吗？如果是，我做错了什么？

这里不是前端开发人员，所以如果我遗漏了一些明显的东西，请告诉我。

【问题讨论】：

标签： reactjs less antd

【解决方案1】：

当默认导出是具有变量的对象时，代码正在解构默认导出。因此，应该是：

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
  }),
);

【讨论】：

【解决方案2】：

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

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

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}
  }),
);

专业提示：要在应用程序中覆盖 darkTheme，您可以创建自己的 javascript 文件并将其导入 config-overrides.js 文件并在 modifyVars 中解构

【讨论】：

【解决方案3】：

对我有用的解决方案是 @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
  }),
);

【讨论】：

知道如何直接在应用程序中启用暗主题和默认主题之间的切换吗？

【解决方案4】：

https://www.npmjs.com/package/antd-theme

app.jsx

import { Button, Select } from 'antd';
import { ThemeProvider, useTheme } from 'antd-theme';
import React from 'react';
import ReactDOM from 'react-dom';
import { SketchPicker } from 'react-color';

const initialTheme = {
  name: 'default',
  variables: { 'primary-color': '#00ff00' },
};

const ThemeSelect = () => {
  const [{ name, variables, themes }, setTheme] = useTheme();

  return (
    <>
      <Select
        style={{ width: 100 }}
        value={name}
        onChange={
          (theme) => setTheme({ name: theme, variables })
        }
      >
        {
          themes.map(
            ({ name }) => (
              <Select.Option key={name} value={name}>
                {name}
              </Select.Option>
            )
          )
        }
      </Select>
      <SketchPicker
        color={variables['primary-color']}
        onChange={(value) => {
          // Will update all css attributes affected by primary-color
          setTheme({ name, variables: { 'primary-color': value.hex } });
        }}
      />
    </>
  );
};

const App = () => {
  const [theme, setTheme] = React.useState(initialTheme);
  return (
    <ThemeProvider
      theme={theme}
      onChange={(value) => setTheme(value)}
    >
      <ThemeSelect />
      <Button type="primary">Button</Button>
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

对于那些在 react-app-rewired 中使用 react-app-rewire-less 和 customize-cra 的用户，请像这样启用 javascript

config-overrides.js

const { override, fixBabelImports, addLessLoader, addPostcssPlugins, adjustStyleLoaders, addWebpackPlugin } = require('customize-cra');

const AntdThemePlugin = require('antd-theme/plugin');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
  }),
  adjustStyleLoaders(
    (loaders) => {
      loaders.use[0] = {
        loader: AntdThemePlugin.loader
      }
    }
  ),
  addWebpackPlugin(
    new AntdThemePlugin({
      themes: [
        {
          name: 'dark',
          filename: require.resolve('antd/lib/style/themes/dark.less'),
        },
        {
          name: 'compact',
          filename: require.resolve('antd/lib/style/themes/compact.less'),
        },
      ],
    })
  ),
);

【讨论】：

【解决方案5】：

以前的答案对我不起作用。如果它可以帮助其他人，这对我有用。我认为这是由于新的 less loader 版本和/或 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
        }),
      },
    },
  })
);

【讨论】：

适用于 antd 4.15.1、typescript 和 webpack 5 ??