Ant-design: Globales CSS im Komponenten-CSS-Import enthalten

Erstellt am 21. Dez. 2016  Â·  89Kommentare  Â·  Quelle: ant-design/ant-design

Danke fĂŒr diese tolle Bibliothek!

Ich habe versucht, babel-plugin-import fĂŒr modulare CSS-Importe zu verwenden, aber zusammen mit dem CSS fĂŒr eine einzelne Komponente wird viel globales CSS importiert, das meine vorhandenen Stile stört. Ist es möglich, das CSS fĂŒr eine einzelne Komponente zu importieren, ohne dass globales CSS enthalten ist?

Danke!

🗣 Discussion đŸ™…đŸ»â€â™€ïž WON'T RESOLVE

Hilfreichster Kommentar

Das ist aber schreckliches Design.

Alle 89 Kommentare

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

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

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen