web-dev-qa-db-fra.com

Comment appliquer le thème antd dark pour une React App?

Je souhaite utiliser ce thème sombre pour ma nouvelle application web react: https://github.com/ant-design/ant-design-dark-theme

Après avoir suivi les instructions sur la personnalisation du thème ici et les instructions sur l'application du thème dans README ici my config-overrides.js ressemble à ceci:

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

Cela ne semble pas fonctionner. Par exemple, j'ai un composant Menu antd qui apparaît toujours dans le thème "clair" au lieu du thème "sombre".

Je voudrais que tous mes composants antd soient rendus avec le thème sombre sans que je le définisse explicitement. Est-ce possible? Si oui, qu'est-ce que je fais de mal?

Pas un développeur frontend ici, alors faites-le moi savoir si je manque quelque chose d'évident.

reactjslessantd
9
Ashwin

Le code déstructure l'exportation par défaut lorsque l'exportation par défaut est l'objet avec les variables. Par conséquent, il devrait être:

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
Jose Felix

Si vous consignez la variable darkTheme qui a été importée, toutes les variables de style sont présentes dans darkTheme.default objet. J'ai implémenté leur aliyum-theme.

Donc, pour que votre code fonctionne, vous devez modifier modifyVars dans config-overrides.js fichier vers

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

Astuce: pour remplacer darkTheme dans l'application, vous pouvez créer votre propre fichier javascript et l'importer dans config-overrides.js fichier et destruction dans modifyVars

2
Anuj

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

Pour ceux qui utilisent react-app-rewire-less et customize-cra avec react-app-rewired, activez javascript comme ceci

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