Voulez-vous dire des règles CSS comme celle-ci ?

html,
body {
  ...
}

Oui.

Il est impossible de ne pas importer ces règles CSS maintenant.

https://github.com/ant-design/ant-design/issues/1966#issuecomment -247946641

Vous devez remplacer ces styles globaux maintenant.

Ou vous supprimez l'option style de babel-plugin-import , importez le moins de fichiers indépendamment.

<strong i="12">@import</strong> "~antd/lib/style/themes/default.less";
<strong i="13">@import</strong> "~antd/lib/button/style/index.less";

C'est une conception terrible cependant.

Ce problème rend cette bibliothèque très difficile à utiliser. Surtout avoir des propriétés globales sur le corps, etc. Je pense que ce problème devrait être beaucoup plus clair à moins que vous n'ayez l'intention de changer cela.

@Forestdev @peitalin c'est un problème connu, mais nous n'avons pas assez de temps pour résoudre ce problème.

Mais nous pouvons continuer à discuter ici.

Si nous pouvons importer des modifications avec rupture, nous pouvons résoudre ce problème. Par exemple, déplacez les styles lors de la réinitialisation vers les styles des composants :

Se déplacer:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

À:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

Et pour la rétrocompatibilité, nous pouvons fournir une feuille de style de réinitialisation autonome.

import 'antd/styles/reset.less'

y a-t-il une mise à jour à ce sujet ?

Nous pouvons discuter, mais nous n'avons pas le temps d'appliquer une solution (si nous pouvons trouver) maintenant.

Je pense que c'est un problème critique car peu de gens peuvent se permettre d'importer un css global et de faire remplacer leurs styles existants

C'est vraiment ennuyeux ce qui m'a empêché d'adopter Antd

Cela bloquera de nombreux développeurs #

parce que ant ne peut pas bootstarp compatible, j'ai dû renoncer à utiliser ant.

que diriez-vous de mettre moins de fichier dans une bibliothèque indépendante.

d'ailleurs. j'essaie

Discussion connexe : https://github.com/palantir/blueprint/issues/244

Salut les gars, je travaille sur [email protected] et j'essaie de trouver une solution au problème global des styles.

J'ai essayé la solution de import 'antd/styles/reset.less' de @benjycui. Il s'avère que ce serait un changement de rupture et rendrait l'importation de styles beaucoup plus compliquée, en particulier avec babel-plugin-import. Je décide donc de le passer.

Ensuite, je trouve que le point principal de ce problème est d'environ babel-plugin-import qui transformera le code en :

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

La meilleure solution consiste à ne pas utiliser l'option style de babel-plugin-import et à importer le style manuellement.

<strong i="17">@import</strong> '~antd/dist/antd.css';

// your global styles
body {
 ...
}

J'abandonne donc toute l'idée reset.less et supprime simplement les codes de réinitialisation ennuyeux comme: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. moins#L33 -L50

J'ai également ajouté un meilleur code de typographie de bootstrap@v4 pour résoudre #6162

Toutes les mises à jour sont maintenant dans # 7682 et seront bientôt fusionnées dans antd-3.0.

Changez simplement import 'antd/styles/reset.less en import 'antd/styles/typography.less .

Lorsque les utilisateurs effectuent une mise à niveau depuis [email protected] , import 'antd/styles/typography.less est un adaptateur pour faciliter la migration.

Lorsque les utilisateurs découvrent antd, import 'antd/styles/typography.less est une fonctionnalité facultative, ils n'ont donc pas à s'inquiéter des conflits.

Ajout antd/style/v2-compatible-reset.less .

+// For 2.x reset compatibility
+//   import 'antd/style/v2-compatible-reset';
+//     or
+//   <strong i="7">@import</strong> '~antd/style/v2-compatible-reset.css';

Quelqu'un peut-il expliquer certaines étapes pour résoudre ce problème, car ce problème est maintenant fermé. J'essaie d'utiliser antd dans le script de contenu d'une extension chrome et cela gâche toutes les pages Web.

@abhinavzspace , vous pouvez installer antd@next pour obtenir la version 3.0 Alpha, ce qui résout quelque peu ce problème, mais pas complètement.

Après beaucoup de temps, j'ai trouvé une solution qui a fonctionné pour moi. Peut-être que ça marche pour d'autres...

Le problème est que chaque composant importe un tas de réinitialisations et de remplacements globaux (y compris normalize.css) à partir de style/core/base.less , si ces styles se chargent de manière asynchrone, ils remplacent les styles de page, ce qui gâche tout.

J'ai trouvé que l'ajout

import 'antd/lib/style/index.css'
// import 'antd/lib/style'  if you are using LESS

au point d'entrée de mon projet, Webpack pack les réinitialisations avant tous les autres styles, donc lorsqu'un composant asynchrone se charge, il n'importe/n'inclut plus les réinitialisations.

est-ce qu'il devrait donner un autre index.less pour chaque composant. l'index.less peut être contrôlé. et aussi presque tous les fichiers en moins suppriment la directive @import ou utilisent simplement @import (référence)

Sera-ce une bonne solution ?

tsk tsk tsk. Ce problème doit être "ouvert" afin que tout le monde sache qu'il s'agit d'un problème connu. Juste abandonné et au milieu d'un projet juste pour ça.

C'est une vraie déception. Ant m'a été recommandé et cela semble prometteur, mais ce comportement gâche notre conception existante et donne à Ant l'impression d'être Bootstrap. 😦

Ant doit avoir une opinion sur l'apparence de ses propres composants, mais pas sur l'apparence du site de l'utilisateur.

Ce problème implique qu'Ant 3 corrige ce problème. Mais je vois encore beaucoup de styles mondiaux. Que doivent faire les utilisateurs pour éviter d'ajouter ces styles globaux ?

@openjck J'ai trouvé que cela semble réinitialiser les styles globaux (je l'ai ajouté à mon point d'entrée React):

import 'antd/lib/style/v2-compatible-reset';

Je l'ai trouvé enterré dans leur changelog

J'ai trouvé cette note, mais elle n'a pas fonctionné pour moi. La documentation est assez sommaire. Quelles autres importations liées au style avez-vous effectuées et dans quel ordre ?

En ce qui concerne les styles Ant, c'est à peu près tout. J'utilise aussi le paramètre style: true , ce qui peut avoir de l'importance.

Quel genre de changements de style globaux voyez-vous ?

J'utilise React avec webpacker et rails et j'ai le même problème auparavant. Pour résoudre cela, dans ma vue HTML, j'ajoute une balise de lien de feuille de style du nom de fichier CSS existant sous le stylesheet_pack_tag, et cela fonctionne.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@ jhdavids8 , où définissez-vous style: true ? Je ne suis pas sûr que cela s'applique à ma configuration.

J'utilise create-react-app. La documentation recommande d'ajouter ceci à l'une des feuilles de style principales :

<strong i="10">@import</strong> '~antd/dist/antd.css';

... mais cela introduit des changements de style globaux, comme une famille de polices et une hauteur de ligne définies sur le corps.

J'utilise simplement babel-plugin-import comme documenté ici pour importer des styles à la demande. L'option style: true est un moyen d'importer les fichiers source Sass (voir this ), dont nous avons besoin car nous personnalisons également fortement le thème Ant

Notre équipe vient d'abandonner et à cause des styles mondiaux 😭 . Je sais que vous êtes occupé, mais si vous pouviez trouver un moyen de résoudre ce problème, cela augmenterait radicalement la portée d'antd.

Veuillez rouvrir ce problème. Je vois toujours ce comportement et les autres aussi.

+1

+1

Le css global ajouté par moi-même sera empaqueté au milieu de /lib/style/index.css à chaque fois, je veux juste supprimer l'antd
Ajoutez l'affichage correct dans IE 10-.
Retour
html,
corps {
largeur : 100 % ;
hauteur : 100 % ;
}
Pourquoi est-ce si difficile... Pourquoi le css global personnalisé ne peut-il pas être placé à la fin de /lib/style/index.css

+1

+1

J'ai trouvé que j'étais capable de résoudre le problème d'une manière décrite par @ afc163 .

En règle générale, vous feriez import 'antd/lib/tabs/style/css'; , qui pointe vers un fichier contenant uniquement ceci :

'use strict';
require('../../style/index.css');
require('./index.css');

Je voulais juste importer le CSS des onglets, j'ai donc ajouté ceci à mon fichier de composant :

import 'antd/lib/tabs/style/index.css';

Et il semblait styliser mon composant Tabs de manière appropriée sans affecter le reste de la page.

Attention cependant, car le premier style est là pour une raison - peut-être que certains composants en dépendent plus que d'autres et cela peut ne pas fonctionner dans tous les cas.

_Si vous ne le faites pas déjà, assurez-vous de supprimer la propriété style de vos plugins .babelrc :
[ "import", { "libraryName": "antd" } ] _

J'espère que cela aide quelqu'un!

C'est complètement fou... Une bibliothèque de composants "modulaire", qui interfère avec les styles globaux. Je n'ai aucune idée de la raison pour laquelle cette bibliothèque est si appréciée car elle se trompe sur une chose aussi fondamentale. Sans oublier qu'ils ont fermé ce ticket comme si le problème était résolu.

@strongui babel-plugin-import ne fonctionne pas pour vous ?

@abenhamdine Non, ce n'est pas le cas. Et je ne suis pas le seul à en juger par les commentaires ci-dessus.

En utilisant la dernière version de la bibliothèque, j'ai toujours ce problème.

Quelqu'un a-t-il trouvé une solution (idéalement pas une réinitialisation) ?

J'ai réussi à importer le CSS exact pour les composants plus petits dont j'ai besoin

import 'antd/lib/checkbox/style/index.css'

Mais maintenant j'essaie d'implémenter une table. Le tableau repose sur de nombreux styles, j'ai donc dû importer toutes les différentes feuilles CSS séparément, ce qui est bien. _Sauf_ que pour la fonctionnalité de tri, j'ai besoin du icon CSS, qui n'existe pas dans antd/lib/icon . Au lieu de cela, j'ai dû importer la feuille de style principale puisque l'icône CSS redirige simplement vers elle.

import 'antd/lib/style/index.css'

C'est le fichier qui affecte le reste de mon application ☝️

À tout le moins, pouvez-vous faire en sorte qu'aucune feuille CSS ne redirige vers la feuille principale ? (Comme le icon dont j'ai besoin pour le tri des tables ?)

De plus, @ afc163 , veuillez rouvrir ce problème, il n'a pas été résolu.

Il suffit de lire le fil et de voir la balise "WON'T FIX". Il s'agit d'un bogue P0 qui bloque toutes les grandes applications, composants intégrés qui choisissent Ant.D pour devenir leur bibliothèque de composants. Le tag doit être 'HEART BREAKING'.

@ afc163 pourquoi diable cela est-il marqué comme ne réparant pas ?? Le cœur de la philosophie de réaction et de la conception modulaire est que les composants NE SONT PAS saignés dans d'autres composants. Cela n'a absolument aucun sens. J'ai passé du temps à extraire le css pour l'arborescence et j'ai pu le faire fonctionner sans affecter quoi que ce soit d'autre, donc je sais que c'est possible.

+1 pour la réouverture de ce problème. Essayer de faire passer notre application de Material-UI à AntD et c'est un obstacle majeur à l'entrée.

+1 pour la réouverture. babel-plugin-import ne fonctionne pas pour moi, j'ai essayé tous les trucs et instructions. Impossible de changer la police globale de mon application 😱

Il y avait un problème connexe dans blueprintjs palantir/blueprint#244 .

Une suggestion consiste à utiliser un plugin postcss appelé : css-byebye
https://github.com/AoDev/css-byebye

Cela peut aider comme solution temporaire.

Grande bibliothèque mais horrible façon de traiter ses utilisateurs. Pourquoi les polices par défaut devraient-elles être modifiées ? Et pourquoi n'y a-t-il aucun moyen de réinitialiser les polices et le style ?

Cela nous empêche - et beaucoup d'autres à en juger par la lecture des commentaires - d'utiliser cette bibliothèque.

Je ne sais pas s'il s'agit d'un problème de langue/culture, mais les développeurs de cette bibliothèque - prenez note : Quel est l'intérêt de créer une bibliothèque que personne ne veut utiliser ? Pourquoi compliquez-vous l'utilisation de votre bibliothèque par vos collègues développeurs ?

Quel est l'intérêt de créer une bibliothèque que personne ne veut utiliser ? Pourquoi compliquez-vous l'utilisation de votre bibliothèque par vos collègues développeurs ?

S'il vous plaît, restez modéré.
De nombreux développeurs et startups utilisent ou souhaitent utiliser cette bibliothèque.

Cette bibliothèque est open-source et gratuite. Si vous ne voulez pas l'utiliser, ne l'utilisez pas.
Si vous souhaitez le modifier, vous pouvez le bifurquer pour votre propre usage ou soumettre un PR, les mainteneurs d'ant-design sont ouverts aux contributions.

Il n'y a donc pas lieu de râler ici.

Ce problème est également un facteur décisif pour mon équipe.
Nous aimons le projet et tout le travail qui a été fait, mais ce seul problème nous empêche de l'utiliser.

C'est pourquoi je suis toujours ce problème dans l'espoir qu'il soit rouvert et corrigé dans un proche avenir.

Oh je suis très modéré. Et je ne râle pas ici.

J'attire votre attention sur le fait que votre bibliothèque - même si elle est géniale - ne devrait pas avoir d'effets secondaires inutiles. Imaginez si j'utilise MomentJS (par exemple) et qu'il commence à afficher les dates et les heures en Klingon !

"Allez vous fork" n'est pas non plus la réponse. En fait, c'est l'état triste et pathétique de nombreux projets open source.

Nous construisons nous-mêmes des systèmes complexes - nous ne sommes pas des débutants ici. Nous voulons utiliser une bibliothèque et continuer notre vie. Au moins, il devrait y avoir un moyen de demander à la bibliothèque de ne pas modifier la police ou la taille de police par défaut. C'est tout ce que je - et peut-être d'autres ici - demandent.

Vous pouvez choisir d'être sourd et d'ignorer ces préoccupations - en vous concentrant au lieu de choisir mes mots - OU vous pouvez choisir de comprendre ce que les gens disent ici et leur fournir un moyen d'utiliser votre bibliothèque sans aucun effet secondaire.

Que la force soit avec vous pendant que vous vivez longtemps et prospérez.

Je ne pourrais pas être plus d'accord avec @kotpal . Ce qui m'étonne que cette discussion ne porte pas sur "pouvez-vous ajouter cette fonctionnalité" ou "ne serait-ce pas bien si...", c'est littéralement essayer de convaincre un auteur qu'un composant ne devrait pas jouer avec le global Etat. C'est littéralement à bout portant le concept de base de ReactJS et de toute conception modulaire.

Vous ne plaisantez PAS avec GLOBAL quoi que ce soit, à moins que vous ne fournissiez un thème global ou quelque chose du genre.

Je comprends ce que dit @abenhamdine . Mais je suis aussi d'accord avec @strongui .

Peut-être que Ant est censé être une expérience complète. Mais dans la pratique, de nombreuses personnes doivent encore travailler avec du code hérité qu'elles ne peuvent tout simplement pas modifier. Et si ce projet entre en conflit avec cet ancien code, nous perdons tous les avantages de l'utilisation de React (ou de tout autre framework similaire) en premier lieu.

Si ce problème empêche tant de gens d'adopter pleinement le projet, peut-être pouvons-nous nous serrer les coudes et mettre une prime dessus ou quelque chose comme ça?

Je sais que je n'ai pas les connaissances ni le temps pour résoudre ce problème par moi-même, alors que faudrait-il aux contributeurs pour le résoudre ? (et oui c'est un problème et non une fonctionnalité)

J'ai eu un certain succès en remplaçant le css global fourni par antd et en utilisant des projets comme le style jsx.
Vous pouvez voir le site déployé ici ! Ps : son travail en cours.

Je viens de me retrouver dans la même situation et j'ai eu un succès modéré en utilisant la même approche décrite par @inverts et @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment -361421192 et https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). Ainsi, certains de mes composants ressemblent à ceci:

// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'

import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'

import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'

import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc

Cela fonctionne assez bien avec la plupart des composants antd, mais il y en a d'autres qui n'ont pas de fichier css spécifique qui leur est associé, et ses styles ne peuvent être trouvés que dans le fichier global. C'est le cas pour le composant icon , pour les faire fonctionner, j'ai dû copier manuellement tous les styles liés aux icônes du fichier global vers ma propre feuille de style. Mainteneurs : accepteriez-vous qu'un PR inclue un antd/lib/icon/style/index.css ?

On dirait que vous pouvez également inclure des fichiers individuels moins, par exemple import 'antd/lib/spin/style/index.less'

Avez-vous prévu de résoudre ce problème officiellement ?

Toujours un problème mais j'essaie de résoudre avec des importations référencées comme l'explique @reyronald .

Je suis également coincé avec le problème de style de Icon .

@reyronald pouvez-vous faire un PR, s'il vous plaît ?

Les personnes qui en souffrent voudront peut-être essayer mon fork en ajoutant le paquet directement à partir du référentiel

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

ou

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

J'ai seulement exclu base.less et je l'ai construit sans aucune autre modification. Cela fonctionne dans mon cas, je n'utilise pas beaucoup de composants. Cela va probablement casser l'apparence de certains composants, surtout si vous n'avez pas déjà une feuille de style de réinitialisation saine dans votre projet. #4546

Hey @ afc163 J'aimerais aussi intervenir ici et ajouter une voix supplémentaire pour résoudre ce problème. Nous construisons une grande application avec de nombreuses cibles, et quelques-unes de nos cibles sont chargées sur des sites tiers. antd interférer avec le CSS global est problématique pour nous car nous finissons par détruire les réinitialisations CSS et les polices de ces sites tiers. Nous adorons la bibliothèque et serions ravis de contribuer à un correctif si les responsables étaient disposés à nous indiquer une direction. Veuillez rouvrir ou diriger la conversation vers un autre problème ouvert ! Merci

Nous avons donc pu faire fonctionner cela (du moins jusqu'à présent) en utilisant une manipulation de webpack pour charger un autre fichier less :

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Où le fichier src/style.less charge les mêmes fichiers que le fichier index.less , mais les charge dans le cadre d'un sélecteur de niveau supérieur :

#root { <strong i="11">@import</strong> '~antd/lib/style/core/index.less'; <strong i="12">@import</strong> '~antd/lib/style/themes/default.less'; }

Le résultat est que tous les styles "globaux" sont appliqués avec la portée #root :

`#article racine,

racine de côté,

boîte de dialogue racine,

légende racine,

figure racine,

pied de page racine,

en-tête racine,

hgroup racine,

racine principale,

navigation racine,

section racine {

bloc de visualisation;
}
`
etc...

J'espère que cela est utile pour quelqu'un.

Les gens, c'est vraiment ennuyeux. Ce comportement de style n'est pas ce que vous attendez d'une bibliothèque d'interface utilisateur de classe mondiale.

Mentionnez au moins la réinitialisation globale dans les documents, afin que les gens ne soient pas confus. Ou probablement un guide "Intégration dans un site Web hérité" avec une recette sur l'importation de styles et d'icônes individuels sera utile

Je pense que les mainteneurs se sont désabonnés de ce problème après sa fermeture parce qu'ils n'ont pas participé à la discussion depuis, donc nous ne recevrons probablement aucun soutien officiel à ce sujet à moins que nous n'ouvrions un nouveau problème, que nous les contactions directement ou que nous ouvrions un PR.

J'ai finalement trouvé un moyen de contourner ce problème en produisant un nouveau fichier CSS basé sur l'antd.css d'origine, avec chaque règle précédée d'une classe personnalisée. Ma solution utilise PostCSS, Gulp et le plugin postcss-prefixwrap :

https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa

Il est loin d'être parfait, mais fonctionne étonnamment bien. Du moins pour mes besoins ;-)

L'essentiel contient également une version prête à l'emploi de antd CSS, préfixée par .antd-ns ("ns" comme raccourci pour "espace de noms")

Remarques:
Une exigence importante pour moi était qu'il soit automatisé, de sorte qu'un CSS préfixé puisse facilement être produit pour chaque nouvelle version de fourmi.

• il est conçu simplement comme un outil pour créer le CSS préfixé ; afin qu'il puisse s'exécuter à partir d'un dossier différent séparé de votre projet. Pas besoin que votre projet basé sur antd inclue PostCSS ou Gulp ! Le CSS résultant doit simplement être placé dans le dossier CSS statique de votre projet (ce qui est fait par Gulp s'il est configuré en conséquence).
• postcss-prefixwrap doit être au moins la version 1.3.0, qui inclut mon correctif pour préserver les animations d'images clés antd

Commentaires/retours toujours appréciés !

Merci à @dbtedman d'avoir rendu cela possible avec son excellent plugin PostCSS postcss-prefixwrap .

Commentaires / retours appréciés !

J'ai finalement trouvé un moyen de contourner ce problème en produisant un nouveau fichier CSS basé sur l'antd.css d'origine, avec chaque règle précédée d'une classe personnalisée.

C'est à mon humble avis la solution la plus simple.
Personnellement, je n'en ai pas besoin actuellement, mais il serait avantageux pour tout le monde que quelqu'un soumette un PR pour ajouter un nom de classe moins variable (par exemple .@{scope} ) avant chaque règle CSS dans moins de fichiers.

Par défaut, cette variable serait vide, pour éviter de casser le comportement actuel.

Il suffirait de définir la variable avec, par exemple, antd pour isoler les styles.

Je pense que cette solution serait acceptable pour les mainteneurs et permettrait d'avancer.

Voici une solution de contournement qui a fonctionné pour moi. J'ai créé le fichier styles.less

// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
<strong i="7">@import</strong> '~antd/lib/style/mixins/index.less';
<strong i="8">@import</strong> '~antd/lib/style/core/iconfont.less';
<strong i="9">@import</strong> '~antd/lib/style/core/motion.less';

<strong i="10">@import</strong> '~antd/lib/menu/style/index.less';
<strong i="11">@import</strong> '~antd/lib/dropdown/style/index.less';
<strong i="12">@import</strong> '~antd/lib/button/style/index.less';
<strong i="13">@import</strong> '~antd/lib/checkbox/style/index.less';
<strong i="14">@import</strong> '~antd/lib/grid/style/index.less';

Dans .babelrc j'ai :

  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false,
      }
    ]
  ]

pour optimiser la taille de la construction JS comme décrit dans https://ant.design/docs/react/getting-started#Import -on-Demand et https://github.com/ant-design/babel-plugin-import

Pour un style personnalisé, j'ai changé ma configuration webpack en :

module: {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader'
    }, {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {"primary-color": "#ed1c24"},
      }
    }]
  }]
}

comme décrit dans https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)

BTW : J'ai essayé d'utiliser new webpack.IgnorePlugin(/style\/core\/base/) pour simplement ignorer ce fichier "base.less" du traitement, mais je n'ai pas pu le faire fonctionner. Je ne sais pas pourquoi. Mon hypothèse est que parce qu'il est traité avec LESS, et non directement avec Webpack.

Pour ce que ça vaut, j'ai modifié manuellement antd.css et j'ai pu supprimer le style indésirable sans casser les composants antd que j'utilise.

@paneq Je fais actuellement la même chose. Notez que l'option de style babel-plugin-import peut également être une fonction, qui peut décider si un style doit être inclus. Je n'ai tout simplement pas réussi à le faire fonctionner. Faudrait déboguer ça…
Peut-être que j'interprète aussi mal cette option?

@paneq J'ai copié ce que vous avez fait et cela semble fonctionner jusqu'à présent, mais je n'ai pas essayé suffisamment de composants pour voir lesquels nécessitent ce css global. Merci

@vthinkxie

salut, il devrait être possible d'essayer de faire correspondre tous les éléments, en commençant par .ant, et de leur attribuer des styles

*[classe^='fourmi-']{
dimensionnement de la boîte : border-box ;
-webkit-tap-highlight-color : rgba (0, 0, 0, 0) ; // supprimer la couleur de surbrillance du robinet pour le safari mobile
}

Il devrait être compatible avec tous les navigateurs et ne devrait pas tarder à être mis en œuvre.

Nous avons donc pu faire fonctionner cela (du moins jusqu'à présent) en utilisant une manipulation de webpack pour charger un autre fichier less :

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Où le fichier src/style.less charge les mêmes fichiers que le fichier index.less , mais les charge dans le cadre d'un sélecteur de niveau supérieur :

#root { <strong i="12">@import</strong> '~antd/lib/style/core/index.less'; <strong i="13">@import</strong> '~antd/lib/style/themes/default.less'; }

Le résultat est que tous les styles "globaux" sont appliqués avec la portée #root :

Quelle version de less-loader utilisez-vous ? Semble que cela ne fonctionne qu'avec 3.0.0? Voir. par exemple https://github.com/webpack-contrib/less-loader/issues/184

De plus, quelle version d'antd utilisiez-vous pour cette solution de contournement ? La raison pour laquelle je demande est que je n'ai pas réussi même avec [email protected] et [email protected] (webpack a eu des problèmes de résolution après le changement). ..

Je ne sais pas si cela aide quelqu'un, mais ce qui suit m'a aidé à importer le CSS uniquement pour le composant utilisé :

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

Je ne sais pas si cela aide quelqu'un, mais ce qui suit m'a aidé à importer le CSS uniquement pour le composant utilisé :

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

Oui, cela semble fonctionner correctement pour de nombreux composants. Votre kilométrage peut varier, cependant - au moins, Select a besoin d'un peu plus que les styles propres au composant. L'icône "supprimer" dans les sélections ne sera pas rendue autrement ; Je n'ai pas eu le temps de suivre complètement le problème, mais c'est probablement quelque chose de mineur. Vous devrez donc peut-être imiter certains styles des styles principaux dans certains composants.

Bien que cette option ne soit pas tout à fait parfaite, elle pourrait bien fonctionner pour de nombreux composants. Les styles personnalisés risquent de rompre avec les mises à jour, mais vous pouvez évidemment contrôler quand vous voulez faire vos mises à jour.

La meilleure solution que j'ai trouvée pour notre organisation est d'inclure la feuille CSS entière d'antd, avec tous les styles qui affectent les styles non nommés et supprimés. Le kilométrage peut varier, et il y a évidemment l'inconvénient d'importer maintenant _chaque_ style. Mais cela fonctionne bien et je n'ai vu aucun problème après l'avoir fait pendant environ deux mois maintenant.

@jaleikas
Avez-vous trouvé une solution à ce problème ? Autant que je sache, le problème avec [email protected] n'est toujours pas résolu et, par conséquent, le correctif suggéré avec NormalModuleReplacementPlugin ne fonctionne pas. Cette solution semble en fait être la meilleure puisque les choses peuvent être remplacées et délimitées manuellement.
J'ai essayé la même chose que vous, en rétrogradant le chargeur less, mais la résolution Webpack ne fonctionne pas.

En utilisant [email protected] ici.

Les personnes souffrant de cela voudront peut-être essayer mon fork en ajoutant le paquet directement depuis le référentiel

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

ou

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

J'ai simplement jeté la base et l'ai construite sans aucune autre modification. Cela fonctionne dans mon cas, je n'en utilise pas beaucoup de composants. Il sera probablement affecté par certains composants, surtout si vous n'avez pas déjà une feuille de style de réinitialisation raisonnable dans votre projet. #4546

cela fonctionne pour moi

Les personnes qui en souffrent voudront peut-être essayer mon fork en ajoutant le paquet directement à partir du référentiel

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

ou

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

J'ai seulement exclu base.less et je l'ai construit sans aucune autre modification. Cela fonctionne dans mon cas, je n'utilise pas beaucoup de composants. Cela va probablement casser l'apparence de certains composants, surtout si vous n'avez pas déjà une feuille de style de réinitialisation saine dans votre projet. #4546

Merci pour cette soluce !

Avez-vous trouvé une solution à ce problème ? Autant que je sache, le problème avec [email protected] n'est toujours pas résolu et, par conséquent, le correctif suggéré avec NormalModuleReplacementPlugin ne fonctionne pas. Cette solution semble en fait être la meilleure puisque les choses peuvent être remplacées et délimitées manuellement.

J'ai choisi d'arrêter d'utiliser antd et j'ai décidé de choisir des composants sans style (comme rc-switch). Le problème est que la plupart des composants "sans style" sont soit horriblement/non documentés, et certains d'entre eux semblent également se comporter différemment, donc pour la plupart, j'ai abandonné et j'ai cherché ailleurs...

salut, il devrait être possible d'essayer de faire correspondre tous les éléments, en commençant par .ant, et de leur attribuer des styles

*[classe^='fourmi-']{
dimensionnement de la boîte : border-box ;
-webkit-tap-highlight-color : rgba (0, 0, 0, 0) ; // supprimer la couleur de surbrillance du robinet pour le safari mobile
}

Il devrait être compatible avec tous les navigateurs et ne devrait pas tarder à être mis en œuvre.

@tylik1 , merci ! J'avais juste besoin de corriger la famille de polices pour qu'elle corresponde au reste de mon application électronique. cela m'a totalement sauvé.

Je ne sais pas si cela aide quelqu'un, mais ce qui suit m'a aidé à importer le CSS uniquement pour le composant utilisé :

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

cela fonctionne pour moi par ce qui suit.

import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';

Malheureusement, c'est un bouchon de spectacle. Je n'implémenterai pas non plus Antd même si le sélecteur de date est le meilleur que j'ai pu trouver jusqu'à présent.

Nous recherchons actuellement une bibliothèque de composants de réaction pour notre entreprise et c'est aussi un problème de blocage pour nous, et nous n'utilisons probablement pas de fourmi à cause de cela.

Nous examinons également React MUI, qui a d'excellentes options de thème, peut-être que vous pouvez voir comment ils le font et implémenter quelque chose de similaire.

J'ai utilisé https://www.npmjs.com/package/patch-package pour commenter

// import 'normalize.css/normalize.css';

à partir de antd-mobile/es/style/index.js .
Mon but était d'obtenir next.js à construire, donc dans mon cas, j'ai juste inclus un lien CND dans mon en-tête à la place.

C'était en 2020, l'humanité s'est éteinte, le coronavirus, l'ant-design ajoute des styles globaux au projet...

Suivi dans #9363