Làm cách nào để áp dụng chủ đề tối antd cho Ứng dụng React?

Tôi muốn sử dụng chủ đề tối này cho ứng dụng web phản ứng mới của mình: https://github.com/ant-design/ant-design-dark-theme

Sau khi làm theo các hướng dẫn về tùy chỉnh chủ đề ở đây và hướng dẫn áp dụng chủ đề trong README tại đây, config-overrides.js của tôi trông như thế này:

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

Điều này dường như không làm việc. Ví dụ: tôi có một thành phần antd Menu vẫn hiển thị trong chủ đề "sáng" thay vì chủ đề "tối".

Tôi muốn có tất cả các thành phần antd của mình kết xuất với chủ đề tối mà không cần tôi cài đặt rõ ràng. Điều đó có thể không? Nếu có, tôi đang làm gì sai?

Không phải là một dev frontend ở đây, vì vậy xin vui lòng cho tôi biết nếu tôi đang thiếu một cái gì đó rõ ràng.

Giải pháp hiệu quả với tôi là sự kết hợp của cả hai câu trả lời @JoseFelix và @Anujs. Cảm ơn cả hai vì câu trả lời:

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

Nếu bạn điều khiển darkThemebiến nhật ký đã được nhập, tất cả các biến kiểu dáng đều có trong darkTheme.defaultđối tượng. Tôi đã thực hiện chúng aliyum-theme.

Vì vậy, để mã của bạn hoạt động, bạn cần thay đổi modifyVarstrong config-overrides.jstệp thành

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: Để ghi đè darkTheme trong ứng dụng, bạn có thể tạo tệp javascript của riêng mình và nhập config-overrides.jstệp trong tệp và hủy cấu trúc trongmodifyVars

Mã đang phá hủy xuất mặc định khi xuất mặc định là đối tượng có các biến. Do đó, cần phải là:

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

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'));

Đối với những người đang sử dụng react-app-rewire-lessvà customize-cracó phản ứng lại ứng dụng, hãy bật javascript như thế này

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