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

Question

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

按照自定义主题的说明进行操作后 here and directions on applying the theme in README here 我的配置-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
  }),
);

这似乎不起作用。例如，我有一个 Menu antd 组件仍然显示在 "light" 主题而不是 "dark" 主题中。

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

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

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

Answer 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

中解构

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

Answer 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-rewire-less 和 customize-cra 以及 react-app-rewired 的用户，像这样启用 javascript

配置-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'),
        },
      ],
    })
  ),
);

Answer 5

之前的答案对我不起作用。如果它可以帮助其他人，这就是对我有用的方法。我认为是由于新的less loader版本and/or改变了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 主题？

How to apply antd dark theme for a React App?

less

reactjs

antd