Как применить темную тему antd для приложения React? - PullRequest
Новая
       41

Как применить темную тему antd для приложения React?

8 голосов
/ 15 января 2020

Я хочу использовать эту темную тему для моего нового веб-приложения реагирования: https://github.com/ant-design/ant-design-dark-theme

После следующих указаний по настройке темы здесь и указаний по применению тема в README здесь мои конфигурации-переопределения. 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 отображались с темной темой без явной настройки. Это возможно? Если да, что я делаю не так?

Здесь нет разработчика, так что, пожалуйста, дайте мне знать, если я упускаю что-то очевидное.

Ответы [ 3 ]

3 голосов
/ 23 января 2020

Решение, которое работало для меня, было сочетанием ответов @JoseFelix и @ Anu 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
  }),
);
2 голосов
/ 23 января 2020

Если вы сохраняете лог-переменную 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

2 голосов
/ 23 января 2020

Код уничтожает экспорт по умолчанию, если экспорт по умолчанию - это объект с переменными. Поэтому должно быть: 

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