¿Cómo aplicar el tema oscuro antd para una aplicación React?

Siéntete en la libertad de compartir nuestra página y códigos en tus redes sociales, ayúdanos a aumentar esta comunidad.

Solución:

La solución que funcionó para mí fue una combinación de las respuestas de @JoseFelix y @Anujs. Gracias a los dos por las respuestas:

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

El código está desestructurando la exportación predeterminada cuando la exportación predeterminada es el objeto con las variables. Por lo tanto, debería ser:

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

Si inicia sesión en la consola darkTheme variable que ha sido importada, todas las variables de estilo están presentes dentro darkTheme.default objeto. He implementado su aliyum-theme.

Entonces, para que su código funcione, debe cambiar modifyVars dentro de config-overrides.js archivo a

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

Consejo profesional: para anular darkTheme dentro de la aplicación, puede crear su propio archivo javascript e importarlo dentro config-overrides.js archivar y desestructurar dentro modifyVars

---

---

Utiliza Nuestro Buscador