Meinst du solche CSS-Regeln?

html,
body {
  ...
}

Ja.

Es ist unmöglich, diese CSS-Regeln jetzt nicht zu importieren.

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

Sie müssen diese globalen Stile jetzt überschreiben.

Oder Sie lassen die Option style von babel-plugin-import fallen und importieren die weniger Dateien unabhängig voneinander.

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

Das ist aber schreckliches Design.

Dieses Problem macht es sehr schwierig, mit dieser Bibliothek zu arbeiten. Besonders mit globalen Eigenschaften auf Körper usw. Ich denke, dieses Problem sollte viel klarer gemacht werden, es sei denn, Sie haben Pläne, dies zu ändern.

@Forestdev @peitalin Es ist ein bekanntes Problem, aber wir haben nicht genug Zeit, um dieses Problem zu lösen.

Aber wir können hier weiterdiskutieren.

Wenn wir Breaking Changes importieren können, können wir dieses Problem lösen. Verschieben Sie beispielsweise Stile beim Zurücksetzen auf die Stile der Komponenten:

Umzug:

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

Zu:

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

Und für die Abwärtskompatibilität können wir ein eigenständiges Reset-Stylesheet bereitstellen.

import 'antd/styles/reset.less'

gibt es hierzu ein Update?

Wir können diskutieren, aber wir haben jetzt keine Zeit, eine Lösung anzuwenden (falls wir sie finden können).

Ich denke, dies ist ein kritisches Problem, da sich nicht viele Leute leisten können, ein globales CSS zu importieren und ihre vorhandenen Stile überschreiben zu lassen

Das ist wirklich ärgerlich, was mich davon abgehalten hat, Antd zu übernehmen

Dies wird viele Entwickler blockieren#

Da Ant Bootstarp nicht kompatibel ist, musste ich die Verwendung von Ant aufgeben.

wie wäre es mit weniger Dateien in einer unabhängigen Bibliothek.

übrigens. ich versuche

Verwandte Diskussion: https://github.com/palantir/blueprint/issues/244

Hey Leute, ich arbeite an [email protected] und versuche, eine Lösung für das Problem mit globalen Stilen zu finden.

Ich habe die Lösung von import 'antd/styles/reset.less' von @benjycui ausprobiert. Es stellt sich heraus, dass dies eine Unterbrechung wäre und das Importieren von Stilen viel komplizierter machen würde, insbesondere mit babel-plugin-import. Also beschließe ich, es zu bestehen.

Dann finde ich, dass der Hauptpunkt dieses Problems babel-plugin-import ist, was den Code in Folgendes umwandeln wird:

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!!!

Die bessere Problemumgehung besteht darin, die Option style von babel-plugin-import nicht zu verwenden und den Stil manuell zu importieren.

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

// your global styles
body {
 ...
}

Also gebe ich die ganze reset.less -Idee auf und entferne einfach die nervigen Reset-Codes wie: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. weniger#L33 -L50

Außerdem habe ich besseren Typografiecode von Bootstrap@v4 hinzugefügt, um #6162 zu lösen

Alle Updates sind jetzt in #7682 und werden bald in antd-3.0 zusammengeführt.

Ändern Sie einfach import 'antd/styles/reset.less in import 'antd/styles/typography.less .

Wenn Benutzer von [email protected] aktualisieren , ist import 'antd/styles/typography.less ein Adapter, um die Migration zu vereinfachen.

Für Benutzer, die neu bei antd sind, ist import 'antd/styles/typography.less eine optionale Funktion, sodass sie sich keine Gedanken über Konflikte machen müssen.

antd/style/v2-compatible-reset.less hinzugefügt.

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

Kann jemand bitte einige Schritte erklären, um dieses Problem zu beheben, da dieses Problem jetzt geschlossen ist. Ich versuche, antd im Inhaltsskript einer Chrome-Erweiterung zu verwenden, und es bringt alle Webseiten durcheinander.

@abhinavzspace Sie können antd@next installieren, um den 3.0 Alpha-Build zu erhalten, der dieses Problem etwas, aber nicht vollständig löst.

Nach langer Zeit habe ich eine Lösung gefunden, die für mich funktioniert hat. Vielleicht funktioniert es bei anderen...

Das Problem ist, dass jede Komponente eine Reihe globaler Zurücksetzungen und Überschreibungen (einschließlich normalize.css) aus style/core/base.less importiert. Wenn diese Stile asynchron geladen werden, überschreiben sie die Seitenstile und bringen alles durcheinander.

Habe das Hinzufügen gefunden

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

zum Einstiegspunkt meines Projekts bringt Webpack dazu, die Resets vor allen anderen Styles zu packen, sodass beim Laden einer asynchronen Komponente die Resets nicht erneut importiert/einbezogen werden.

tut es sollte einen anderen index.less für jede Komponente geben. die index.less kann gesteuert werden. und auch fast alle weniger Dateien entfernen die Direktive @import oder verwenden einfach @import (Referenz)

Wird es eine gute Lösung sein?

tsk tsk tsk. Dieses Problem sollte "Offen" sein, damit jeder weiß, dass es sich um ein bekanntes Problem handelt. Gerade dafür aufgegeben und mitten in einem Projekt.

Das ist ein echter Mist. Ant wurde mir empfohlen und es sieht vielversprechend aus, aber dieses Verhalten bringt unser bestehendes Design durcheinander und lässt Ant wie Bootstrap erscheinen. 😦

Ant sollte eine Meinung über das Erscheinungsbild seiner eigenen Komponenten haben, aber nicht über das Erscheinungsbild der Website des Benutzers.

Dieses Problem impliziert, dass Ant 3 dieses Problem behebt. Aber ich sehe immer noch viele globale Stile. Was sollten Benutzer tun, um das Hinzufügen dieser globalen Stile zu vermeiden?

@openjck Ich habe festgestellt, dass dies die globalen Stile zurückzusetzen scheint (ich habe es zu meinem React-Einstiegspunkt hinzugefügt):

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

Habe es in ihrem Änderungsprotokoll vergraben gefunden

Ich habe diese Notiz gefunden, aber sie hat bei mir nicht funktioniert. Die Dokumentation ist ziemlich spärlich. Welche anderen stilbezogenen Importe haben Sie vorgenommen und in welcher Reihenfolge?

Soweit Ant-Stile, das war es auch schon. Ich verwende auch die Einstellung style: true , was von Bedeutung sein könnte.

Welche Art von globalen Stiländerungen sehen Sie?

Ich verwende React mit Webpacker und Rails und hatte vorher das gleiche Problem. Um das zu lösen, füge ich in meiner HTML-Ansicht das Stylesheet-Link-Tag des vorhandenen CSS-Dateinamens unter dem stylesheet_pack_tag hinzu, und das funktioniert.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@jhdavids8 , wo stellst du style: true ein? Ich bin mir nicht sicher, ob das auf mein Setup zutrifft.

Ich verwende create-react-app. Die Dokumentation empfiehlt, dies zu einem der Haupt-Stylesheets hinzuzufügen:

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

...dadurch werden jedoch globale Stiländerungen eingeführt, wie z. B. eine Schriftfamilie und Zeilenhöhe, die für den Körper festgelegt werden.

Ich verwende nur babel-plugin-import wie hier dokumentiert, um Stile bei Bedarf zu importieren. Die Option style: true ist eine Möglichkeit, die Sass-Quelldateien (siehe this ) zu importieren, die wir benötigen, da wir auch das Ant-Design stark anpassen

Unser Team hat antd gerade wegen der globalen Styles aufgegeben 😭 . Ich weiß, dass Sie beschäftigt sind, aber wenn Sie einen Weg finden könnten, dies zu lösen, würde dies die Reichweite von antd radikal erhöhen.

Bitte öffnen Sie dieses Problem erneut. Ich sehe dieses Verhalten immer noch und andere auch.

+1

+1

Das von mir hinzugefügte globale CSS wird jedes Mal mitten in /lib/style/index.css gepackt, ich möchte nur das antd entfernen
Fügen Sie die richtige Anzeige in IE 10- hinzu.
Zurück
html,
Karosserie {
Breite: 100 %;
Höhe: 100 %;
}
Warum ist das so schwierig... Warum kann das benutzerdefinierte globale CSS nicht am Ende von /lib/style/index.css platziert werden

+1

+1

Ich habe festgestellt, dass ich das Problem auf die von @afc163 beschriebene Weise lösen konnte.

Normalerweise würden Sie import 'antd/lib/tabs/style/css'; tun, was auf eine Datei zeigt, die nur Folgendes enthält:

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

Ich wollte nur das Tabs-CSS importieren, also habe ich dies zu meiner Komponentendatei hinzugefügt:

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

Und es schien meine Tabs-Komponente angemessen zu gestalten, ohne den Rest der Seite zu beeinflussen.

Seien Sie jedoch vorsichtig, da der erste Stil aus einem bestimmten Grund vorhanden ist - möglicherweise hängen einige antd-Komponenten mehr davon ab als andere, und dies funktioniert möglicherweise nicht in allen Fällen.

_Falls Sie dies noch nicht tun, achten Sie darauf, die Eigenschaft style aus Ihren .babelrc-Plug-ins zu entfernen:
[ "import", { "libraryName": "antd" } ] _

Hoffe das hilft jemandem!

Das ist absolut verrückt .... Eine "modulare" Komponentenbibliothek, die sich in globale Stile einmischt. Ich habe keine Ahnung, warum diese Bibliothek so hoch angesehen ist, weil sie so etwas Grundlegendes falsch macht. Ganz zu schweigen davon, dass sie dieses Ticket geschlossen haben, als ob das Problem gelöst wäre.

@strongui babel-plugin-import funktioniert bei dir nicht?

@abenhamdine Nein, tut es nicht. Und ich bin nicht allein nach den obigen Kommentaren zu urteilen.

Ich verwende die neueste Version der Bibliothek und habe dieses Problem immer noch.

Hat jemand eine Lösung gefunden (idealerweise kein Reset)?

Ich hatte Erfolg beim Importieren des genauen CSS für die kleineren Komponenten, die ich benötige

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

Aber jetzt versuche ich, eine Tabelle zu implementieren. Die Tabelle basiert auf vielen Stilen, daher musste ich alle verschiedenen CSS-Blätter separat importieren, was in Ordnung ist. _Außer dass ich für die Sortierfunktion das icon CSS benötige, das innerhalb antd/lib/icon nicht existiert. Stattdessen musste ich das Haupt-Stylesheet importieren, da das Symbol-CSS nur darauf umleitet.

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

Dies ist die Datei, die den Rest meiner App beeinflusst ☝️

Können Sie es zumindest so machen, dass keine CSS-Blätter auf das Hauptblatt umleiten? (Wie die icon , die ich für die Tabellensortierung brauche?)

@afc163 bitte öffnen Sie dieses Problem erneut, es wurde nicht gelöst.

Lesen Sie einfach den Thread durch und sehen Sie das Tag "WON'T FIX". Dies ist ein P0-Bug, der jede große Anwendung und eingebettete Komponente blockiert, die Ant.D als ihre Komponentenbibliothek auswählt. Das Tag sollte "HEART BREAKING" lauten.

@ afc163 warum um alles in der Welt ist das als wird nicht behoben markiert?? Der Kern der Reaktionsphilosophie und des modularen Designs besteht darin, dass Komponenten NICHT in andere Komponenten übergehen. Das macht absolut keinen Sinn. Ich habe einige Zeit damit verbracht, das CSS für die Baumauswahl zu extrahieren, und konnte es zum Laufen bringen, ohne etwas anderes zu beeinträchtigen, also weiß ich, dass es möglich ist.

+1 für die Wiedereröffnung dieses Problems. Der Versuch, unsere App von Material-UI auf AntD umzustellen, und dies ist eine große Eintrittsbarriere.

+1 für die Wiedereröffnung. babel-plugin-import funktioniert bei mir nicht, habe alle Tuts und Anleitungen ausprobiert. Die globale Schriftart für meine App kann nicht geändert werden 😱

Es gab ein ähnliches Problem in blueprintjs palantir/blueprint#244 .

Ein Vorschlag ist die Verwendung eines Postcss-Plugins namens: css-byebye
https://github.com/AoDev/css-byebye

Dies kann als vorübergehende Lösung hilfreich sein.

Tolle Bibliothek, aber schreckliche Art, ihre Benutzer zu behandeln. Warum sollten die Standardschriften geändert werden? Und warum gibt es keine Möglichkeit, die Schriftarten und das Styling zurückzusetzen?

Dies hält uns - und viele andere, wenn man die Kommentare liest - davon ab, diese Bibliothek zu verwenden.

Ich weiß nicht, ob dies ein sprachliches/kulturelles Problem ist, aber Entwickler dieser Bibliothek – beachten Sie: Was bringt es, eine Bibliothek zu erstellen, die niemand verwenden möchte? Warum erschweren Sie es Ihren Mitentwicklern, Ihre Bibliothek zu verwenden?

Was bringt es, eine Bibliothek zu erstellen, die niemand verwenden möchte? Warum erschweren Sie es Ihren Mitentwicklern, Ihre Bibliothek zu verwenden?

Bitte bleiben Sie moderat.
Viele Entwickler und Startups nutzen oder wollen diese Bibliothek nutzen.

Diese Bibliothek ist Open Source und kostenlos. Wenn Sie es nicht verwenden möchten, verwenden Sie es nicht.
Wenn Sie es modifizieren möchten, können Sie es für Ihren eigenen Gebrauch forken oder eine PR einreichen. Betreuer von Ant-Design sind offen für Beiträge.

Hier muss man also nicht meckern.

Dieses Problem ist auch ein Deal-Breaker für mein Team.
Wir lieben das Projekt und all die geleistete Arbeit, aber dieses einzelne Problem hindert uns daran, es zu verwenden.

Deshalb verfolge ich dieses Problem immer noch in der Hoffnung, dass es in naher Zukunft wieder geöffnet und behoben wird.

Oh, ich bin sehr moderat. Und ich meckere hier nicht.

Ich mache Sie darauf aufmerksam, dass Ihre Bibliothek - obwohl sie großartig ist - keine unnötigen Nebenwirkungen haben sollte. Stellen Sie sich vor, ich verwende (zum Beispiel) MomentJS und es fängt an, Datum und Uhrzeit auf Klingonisch anzuzeigen!

„Go fork yourself“ ist auch nicht die Antwort. Tatsächlich ist das der traurige und erbärmliche Zustand vieler Open-Source-Projekte.

Komplexe Systeme bauen wir selbst – wir sind hier keine Rookies. Wir wollen eine Bibliothek benutzen und mit unserem Leben weitermachen. Zumindest sollte es eine Möglichkeit geben, die Bibliothek aufzufordern, die Standardschriftart oder -größe nicht zu ändern. Das ist alles, was ich – und vielleicht andere hier – fragen.

Sie können sich dafür entscheiden, unmusikalisch zu sein und diese Bedenken zu ignorieren – indem Sie sich konzentrieren, anstatt auf die Wahl meiner Worte – ODER Sie können sich dafür entscheiden, zu verstehen, was die Leute hier sagen, und ihnen eine Möglichkeit bieten, Ihre Bibliothek ohne Nebenwirkungen zu nutzen.

Möge die Macht mit dir sein, während du lange und wohlhabend lebst.

Kann @kotpal nicht mehr zustimmen. Was mich wundert, dass es in dieser Diskussion nicht um „Können Sie diese Funktion hinzufügen“ oder „Wäre es nicht schön, wenn …“ geht, sondern darum, einen Autor buchstäblich davon zu überzeugen, dass eine Komponente nicht mit dem Globalen herumspielen sollte Zustand. Es ist buchstäblich das Kernkonzept von ReactJS und jedem modularen Design.

Sie legen sich NICHT mit GLOBAL an, es sei denn, Sie bieten ein globales Thema oder so etwas an.

Ich verstehe, was @abenhamdine sagt. Aber ich stimme auch @strongui zu.

Vielleicht soll Ant ein ganzes Erlebnis sein. Aber in der Praxis müssen viele Leute immer noch mit Legacy-Code arbeiten, den sie einfach nicht ändern können. Und wenn dieses Projekt mit diesem alten Code kollidiert, verlieren wir überhaupt alle Vorteile der Verwendung von React (oder einem anderen ähnlichen Framework).

Wenn dieses Problem so viele Leute davon abhält, das Projekt vollständig anzunehmen, können wir uns vielleicht zusammenreißen und ein Kopfgeld darauf aussetzen oder so?

Ich weiß, dass ich nicht über das Wissen oder die Zeit verfüge, um dieses Problem selbst zu beheben. Was wäre also erforderlich, damit die Mitwirkenden es beheben könnten? (und ja, es ist ein Problem und kein Feature)

Ich hatte einige Erfolge damit, das von antd bereitgestellte globale CSS zu überschreiben und Projekte wie styled jsx zu verwenden.
Sie können die bereitgestellte Website hier sehen! Ps: es ist in Arbeit.

Ich habe mich gerade in der gleichen Situation wiedergefunden und hatte mäßigen Erfolg mit dem gleichen Ansatz, der von @inverts und @corinnebrady beschrieben wurde (https://github.com/ant-design/ant-design/issues/4331#issuecomment -361421192 und https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). Also, einige meiner Komponenten sehen so aus:

// ...
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

Dies funktioniert einigermaßen gut mit den meisten antd-Komponenten, aber es gibt andere, denen keine bestimmte CSS-Datei zugeordnet ist, und ihre Stile können nur in der globalen gefunden werden. Dies ist bei der Komponente icon der Fall, damit sie funktioniert, musste ich alle symbolbezogenen Stile manuell aus der globalen Datei in mein eigenes Stylesheet kopieren. Betreuer: Würden Sie eine PR akzeptieren, die ein antd/lib/icon/style/index.css enthält?

Anscheinend können Sie auch einzelne weniger Dateien einfügen, z. B. import 'antd/lib/spin/style/index.less'

Gibt es Pläne, dieses Problem offiziell zu lösen?

Immer noch ein Problem, aber ich versuche es mit referenzierten Importen zu beheben, wie @reyronald erklärt.

Ich stecke auch mit dem Stilproblem von Icon fest.

@reyronald kannst du bitte eine PR machen?

Leute, die darunter leiden, möchten vielleicht meinen Fork ausprobieren, indem sie das Paket direkt aus dem Repository hinzufügen

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

oder

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

Ich habe nur base.less ausgeschlossen und ohne weitere Modifikationen gebaut. Es funktioniert in meinem Fall, ich verwende nicht viele Komponenten davon. Es wird wahrscheinlich das Aussehen einiger Komponenten beeinträchtigen, insbesondere wenn Sie in Ihrem Projekt noch kein vernünftiges Reset-Stylesheet haben. #4546

Hey @afc163 , ich würde auch gerne hier einsteigen und eine zusätzliche Stimme hinzufügen, um dieses Problem zu beheben. Wir erstellen eine große Anwendung mit vielen Zielen, und einige unserer Ziele werden auf Websites von Drittanbietern geladen. antd Das Eingreifen in globales CSS ist für uns problematisch, da wir am Ende CSS-Resets und Schriftarten für diese Websites von Drittanbietern wegblasen. Wir lieben die Bibliothek und würden gerne zu einer Lösung beitragen, wenn die Betreuer bereit wären, uns eine Richtung zu zeigen. Bitte öffnen Sie das Gespräch erneut oder lenken Sie es auf ein anderes offenes Thema! Danke

Wir konnten dies also (zumindest bisher) durch eine Webpack-Manipulation zum Laden einer alternativen Less-Datei zum Laufen bringen:

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

Wobei die src/style.less -Datei die gleichen Dateien wie die index.less -Datei lädt, aber sie innerhalb des Geltungsbereichs eines Top-Level-Selektors lädt:

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

Das Ergebnis ist, dass alle "globalen" Stile mit dem Geltungsbereich #root angewendet werden:

`#Stammartikel,

Wurzel beiseite,

Root-Dialog,

Root Bildunterschrift,

Wurzelfigur,

Root-Fußzeile,

Root-Header,

Root-hgroup,

Wurzel Haupt,

Root-Navigation,

Stammabschnitt {

Bildschirmsperre;
}
`
etc...

Hoffe, das ist hilfreich für jemanden.

Leute, es ist wirklich nervig. Dieses Styling-Verhalten würden Sie von einer Weltklasse-UI-Bibliothek nicht erwarten.

Erwähnen Sie zumindest den globalen Reset in Dokumenten, damit die Leute nicht verwirrt werden. Oder wahrscheinlich ist ein Leitfaden "In eine ältere Website integrieren" mit einem Rezept zum Importieren individueller Stile und Symbole hilfreich

Ich denke, die Betreuer haben sich von diesem Problem abgemeldet, nachdem es geschlossen wurde, weil sie sich seitdem nicht mehr an der Diskussion beteiligt haben, also werden wir wahrscheinlich keine offizielle Unterstützung dazu erhalten, es sei denn, wir eröffnen ein neues Problem, pingen sie direkt an oder öffnen eine PR.

Ich habe endlich einen Weg gefunden, dieses Problem zu umgehen, indem ich eine neue CSS-Datei basierend auf der ursprünglichen antd.css erstellt habe, wobei jeder Regel eine benutzerdefinierte Klasse vorangestellt ist. Meine Lösung verwendet PostCSS, Gulp und das Plugin postcss-prefixwrap :

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

Es ist alles andere als perfekt, funktioniert aber überraschend gut. Zumindest für meine Zwecke ;-)

Das Wesentliche enthält auch eine fertige Version von antd CSS mit dem Präfix .antd-ns ("ns" als Abkürzung für "Namespace")

Anmerkungen:
Eine wichtige Anforderung für mich war, dass es automatisiert ist, sodass CSS mit Präfixen einfach für jede neue Ameisenversion erstellt werden kann.

• es ist nur als Werkzeug zum Erstellen des CSS mit Präfix gedacht; Es könnte also von einem anderen Ordner aus ausgeführt werden, der von Ihrem Projekt getrennt ist. Ihr antd-basiertes Projekt muss PostCSS oder Gulp nicht enthalten! Das resultierende CSS muss nur im statischen CSS-Ordner Ihres Projekts abgelegt werden (was bei entsprechender Konfiguration von Gulp erledigt wird).
• postcss-prefixwrap muss mindestens Version 1.3.0 sein, die meinen Patch enthält, um antd Keyframe-Animationen beizubehalten

Kommentare / Feedback sind immer willkommen!

Vielen Dank an @dbtedman , der dies mit seinem feinen PostCSS postcss-prefixwrap- Plugin ermöglicht hat.

Kommentare / Feedback erwünscht!

Ich habe endlich einen Weg gefunden, dieses Problem zu umgehen, indem ich eine neue CSS-Datei basierend auf der ursprünglichen antd.css erstellt habe, wobei jeder Regel eine benutzerdefinierte Klasse vorangestellt ist.

Dies ist IMHO die direkteste Lösung.
Persönlich brauche ich das derzeit nicht, aber es wäre für alle von Vorteil, wenn jemand eine PR einreichen würde, um eine Variablen ohne Klassennamen (z. B. .@{scope} ) vor jeder CSS-Regel in weniger Dateien hinzuzufügen.

Standardmäßig wäre diese Variable leer, um eine Unterbrechung des aktuellen Verhaltens zu vermeiden.

Man müsste die Variable beispielsweise nur mit antd setzen, um die Stile zu isolieren.

Ich denke, diese Lösung wäre für Betreuer akzeptabel und würde es ermöglichen, weiterzumachen.

Hier ist eine Problemumgehung, die für mich funktioniert hat. Ich habe eine styles.less -Datei erstellt

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

In .babelrc habe ich:

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

zur Optimierung der JS-Build-Größe, wie in https://ant.design/docs/react/getting-started#Import -on-Demand und https://github.com/ant-design/babel-plugin-import beschrieben

Für ein individuelles Styling habe ich meine Webpack-Konfiguration geändert in:

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

wie in https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way) beschrieben

Übrigens: Ich habe versucht, new webpack.IgnorePlugin(/style\/core\/base/) zu verwenden, um diese "base.less"-Datei einfach von der Verarbeitung zu ignorieren, aber ich konnte es nicht zum Laufen bringen. Ich weiß nicht warum. Meine Hypothese ist, dass es mit LESS verarbeitet wird und nicht direkt mit Webpack.

Für das, was es wert ist, habe ich antd.css manuell bearbeitet und konnte unerwünschtes Styling entfernen, ohne die von mir verwendeten antd-Komponenten zu beschädigen.

@paneq mache ich gerade genauso. Beachten Sie, dass die babel-plugin-import auch eine Funktion sein könnte, die entscheiden kann, ob ein Stil eingeschlossen werden soll. Ich habe es einfach nicht zum Laufen bekommen. Müsste das debuggen...
Vielleicht interpretiere ich diese Option auch falsch?

@paneq Ich habe kopiert, was Sie getan haben, und es scheint bisher zu funktionieren, aber ich habe nicht genug Komponenten ausprobiert, um zu sehen, welche dieses globale CSS erfordern. Danke

@vthinkxie

Hallo, es sollte möglich sein, alle Elemente, beginnend mit .ant, abzugleichen und ihnen Stile zuzuweisen

*[class^='ant-']{
Box-Größe: Border-Box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Tipp-Hervorhebungsfarbe für mobile Safari entfernen
}

Es sollte browserübergreifend kompatibel sein und die Implementierung sollte nicht lange dauern.

Wir konnten dies also (zumindest bisher) durch eine Webpack-Manipulation zum Laden einer alternativen Less-Datei zum Laufen bringen:

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

Wobei die src/style.less -Datei die gleichen Dateien wie die index.less -Datei lädt, aber sie innerhalb des Geltungsbereichs eines Top-Level-Selektors lädt:

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

Das Ergebnis ist, dass alle "globalen" Stile mit dem Geltungsbereich #root angewendet werden:

Welche Less-Loader-Version verwendest du? Scheint, als ob es nur mit 3.0.0 funktioniert? Sehen. zB https://github.com/webpack-contrib/less-loader/issues/184

Welche Version von Antd haben Sie für diese Problemumgehung verwendet? Der Grund, warum ich frage, ist, dass ich selbst mit [email protected] und [email protected] keinen Erfolg hatte (webpack hatte nach der Änderung Probleme beim Auflösen). ..

Ich weiß nicht, ob das jemandem hilft, aber das Folgende hat mir geholfen, das CSS nur für die verwendete Komponente zu importieren:

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

Ich weiß nicht, ob das jemandem hilft, aber das Folgende hat mir geholfen, das CSS nur für die verwendete Komponente zu importieren:

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

Ja, das scheint für viele Komponenten ok zu funktionieren. Ihre Laufleistung kann jedoch variieren – zumindest Select benötigt etwas mehr als nur die eigenen Stile der Komponente. Das Symbol „Entfernen“ in Auswahlen wird ansonsten nicht gerendert; Ich hatte keine Zeit, das Problem vollständig aufzuspüren, aber ich bin wahrscheinlich etwas Kleines. Daher müssen Sie möglicherweise einige Stile der Hauptstile in einigen der Komponenten nachahmen.

Obwohl diese Option nicht ganz perfekt ist, könnte sie für viele Komponenten gut funktionieren. Die benutzerdefinierten Stile laufen Gefahr, mit Updates zu brechen, aber Sie können natürlich steuern, wann Sie Ihre Updates durchführen möchten.

Die beste Lösung, die ich für unsere Organisation gefunden habe, besteht darin, das gesamte CSS-Blatt von antd einzuschließen, wobei alle Stile, die nicht von antd benannte Stile betreffen, entfernt werden. Die Kilometerleistung kann variieren, und es gibt offensichtlich die Kehrseite, dass jetzt _jeder_ Stil importiert wird. Aber es funktioniert gut und ich habe seit ungefähr zwei Monaten keine Probleme mehr gesehen.

@jaleikas
Hast du dafür einen Workaround gefunden? Soweit ich das beurteilen kann, ist das Problem mit [email protected] immer noch nicht behoben und daher funktioniert der vorgeschlagene Fix mit NormalModuleReplacementPlugin nicht. Diese Lösung scheint tatsächlich die beste zu sein, da die Dinge manuell überschrieben und eingeschränkt werden können.
Ich habe dasselbe wie Sie versucht und den Less-Loader heruntergestuft, aber dann funktioniert die Webpack-Auflösung nicht.

Verwenden Sie hier [email protected] .

Leute, die darunter leiden, möchten vielleicht meinen Fork ausprobieren, indem sie das Paket direkt aus dem Repository hinzufügen

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

oder

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

Ich habe einfach die Basis verworfen und ohne weitere Modifikationen gebaut. Es funktioniert in meinem Fall, ich verwende nicht viele Komponenten davon. Es wird wahrscheinlich von einigen Komponenten beeinflusst, insbesondere wenn Sie in Ihrem Projekt noch kein vernünftiges Reset-Stylesheet haben. #4546

das funktioniert bei mir

Leute, die darunter leiden, möchten vielleicht meinen Fork ausprobieren, indem sie das Paket direkt aus dem Repository hinzufügen

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

oder

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

Ich habe nur base.less ausgeschlossen und ohne weitere Modifikationen gebaut. Es funktioniert in meinem Fall, ich verwende nicht viele Komponenten davon. Es wird wahrscheinlich das Aussehen einiger Komponenten beeinträchtigen, insbesondere wenn Sie in Ihrem Projekt noch kein vernünftiges Reset-Stylesheet haben. #4546

Vielen Dank für diese Lösung!

Hast du dafür einen Workaround gefunden? Soweit ich das beurteilen kann, ist das Problem mit [email protected] immer noch nicht behoben und daher funktioniert der vorgeschlagene Fix mit NormalModuleReplacementPlugin nicht. Diese Lösung scheint tatsächlich die beste zu sein, da die Dinge manuell überschrieben und eingeschränkt werden können.

Ich entschied mich dafür, antd nicht mehr zu verwenden, und entschied mich für einige ungestylte Komponenten (wie rc-switch). Das Problem ist, dass die meisten "ungestylten" Komponenten entweder schrecklich / nicht dokumentiert sind und einige von ihnen sich auch anders zu verhalten scheinen, also habe ich größtenteils aufgegeben und woanders gesucht ...

Hallo, es sollte möglich sein, alle Elemente, beginnend mit .ant, abzugleichen und ihnen Stile zuzuweisen

*[class^='ant-']{
Box-Größe: Border-Box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Tipp-Hervorhebungsfarbe für mobile Safari entfernen
}

Es sollte browserübergreifend kompatibel sein und die Implementierung sollte nicht lange dauern.

@tylik1 , danke! Ich musste nur die Schriftfamilie anpassen, damit sie zum Rest meiner Elektron-App passt. das hat mich total gerettet.

Ich weiß nicht, ob das jemandem hilft, aber das Folgende hat mir geholfen, das CSS nur für die verwendete Komponente zu importieren:

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

es funktioniert für mich wie folgt.

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

Leider ist dies ein Showstopper. Ich werde Antd auch nicht implementieren, obwohl die Datumsauswahl die beste ist, die ich bisher finden konnte.

Wir suchen derzeit nach einer Reaktionskomponentenbibliothek für unser Unternehmen, und dies ist auch ein blockierendes Problem für uns, und wir verwenden es wahrscheinlich deswegen nicht.

Wir sehen uns auch React MUI an, das großartige Themenoptionen bietet. Vielleicht können Sie sich ansehen, wie sie es tun, und etwas Ähnliches implementieren.

Ich habe https://www.npmjs.com/package/patch-package zum Auskommentieren verwendet

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

ab antd-mobile/es/style/index.js .
Mein Ziel war es, next.js zum Bauen zu bringen, also habe ich in meinem Fall stattdessen einfach einen CND-Link in meinen Header eingefügt.

Es war 2020, die Menschheit starb aus, Coronavirus, Ameisendesign fügt dem Projekt globale Stile hinzu ...

Verfolgung in #9363