Personalizar tema Ant Design (Antd)🎨

Ant Design tal vez sea el favorito de mis frameworks de estilos para ReactJS. Lo he utilizado en varios de mis proyectos y puedo decirles que entre más lo uso, más me sorprende lo enormeeee y poderoso que es.

Sólo hay una cosa que nunca pude hacer aunque intenté hacerlo como decía la documentación, como recomendaban en Stack Overflow, como explicaban en otros post de Medium, etcétera y esta era cambiar el tema por defecto.

El día de hoy, sumergiéndome un poco más en el extenso mar de internet, encontré la solución a mi problema en la última versión de Antd v3 y la última versión de React v16, así que les haré un pequeño post de cómo pueden hacerlo ustedes también.

Crear proyecto con create-react-app

Si ya tienes un proyecto, puedes omitir este paso.

Vamos a crear un proyecto con el nombre que queramos, en mi caso se llama antd-customize-theme y entramos a la carpeta del proyecto:

npx create-react-app antd-customize-theme
cd antd-customize-theme

Dentro de la carpeta del proyecto instalamos las siguientes dependencias:

npm install antd react-app-rewired customize-cra babel-plugin-import less less-loader

Ahora en nuestra carpeta del proyecto vamos a editar el archivo package.json que se encuentra en la raíz, y reemplazamos losreact-scripts con react-app-rewired .

Y por último, creamos en la raíz un archivoconfig-overrides.js a la misma altura que package.json y le agregamos lo siguiente:

Si observamos un poco, podremos ver que modifyVars es el encargado de sobreescribir las variables, así que ahí es donde escribiremos todas la variables que queramos modificar.

La variable “@primary-color” ya está siendo remplazada así que si corremos nuestra aplicación, deberíamos ver el tema modificado.

Pretty easy, huh?🤓

Por último, les dejo el link del repo de Ant Design donde se listan todas las variables que maneja la librería: Default less variables

¡Happy theming!