Comment faire fonctionner les modifications sur les fichiers css de la bibliothèque de composants réagit?

Question

J'utilise certaines bibliothèques de composants pour un projet avec réagir comme antd, material-ui etc. J'ai besoin de modifier certains composants css. Par exemple, j'ai recherché dans le répertoire de antd et situé les fichiers css sous node_modules\antd\dist. Il y a quelques fichiers avec antd.css et antd.min.css il y a aussi un fichier nommé antd.less. Ma question est quel fichier dois-je changer pour css? L'aide serait très appréciée.

Answer 1

Difficile à dire, mais probablement l'antdless.

Je recommande fortement d'écraser le css dans un fichier localcss au lieu de modifier node_modules. Sera plus pratique à entretenir. Cela va devenir pénible en production ou si vous voulez mettre à jour vos modules. Considéré comme une mauvaise pratique.

Et si vous voulez l'éditer directement dans le module, clonez le module dans votre rep. Ne le laissez pas dans node_modules, pour les mêmes raisons.

Answer 2

Redéfinition moins de variables (chemin alternatif) n

variables via Override moins les fichiers de définition.

Créez un fichier autonome tel que celui ci-dessous et importez-le dans votre projet.

@import "~antd/dist/antd.less"; // import official less entry file 
@import "your-theme-file.less"; // override variables here 

Variables par défaut https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less