Ant-design: Globale Stile entfernen

Sie können auch versuchen, Komponenten direkt von https://github.com/react-component zu verwenden.
antd baut auf ihnen auf und sie sind nicht gestylt.

Bitte richten Sie dies an. Es ist ein harter Blocker für unsere App.

Hallo, habt ihr schon mal darüber nachgedacht, eine CSS-in-JS-Bibliothek wie Emotion oder Styled-Komponenten zu verwenden? Es könnte viele Probleme lösen, wie den globalen Import von Stilen und den Bereich der Stile auf die Ameisenkomponenten. Außerdem könnte es auch das Theming verbessern (dynamische Stile). Entschuldigung, wenn dies woanders diskutiert wurde, ich konnte keine relevanten Diskussionen finden.

@divyanshu013 Ich glaube, ich habe gelesen, dass es für sie keine oberste Priorität hat, da antd die antd-Stilspezifikation und nicht nur die Komponenten / Javascript enthalten soll. Außerdem ist dies technisch gesehen ein Monorepo für ihre internen Projekte, sodass die Themengestaltung für die Marken anderer Personen automatisch keine oberste Priorität hat. Das heißt, ich bin bei Ihnen, ich wünschte, es würde gestylte Komponenten anstelle von globalen Stilen verwenden.

https://github.com/ant-design/ant-design/issues/5570#issuecomment -306960517

https://spectrum.chat/thread/ca82a625-134f-49df-9900-1b0b6342e037

Ok, ich muss zugeben, dass ich mir die weniger Dateistruktur von antd nicht so gründlich angesehen habe, also kann vielleicht jemand etwas Licht ins Dunkel bringen:

Wie schwerwiegend ist es, einfach nur die less-Datei der Komponente aufzunehmen? ZB mach sowas wie

import { Select } from 'antd';
import 'antd/lib/select/style/index.less';

Nach einem Schnelltest scheint es zu funktionieren, das hat mich neugierig gemacht...
Ich bin mir sicher, dass dies mit Updates brechen wird, aber die anderen Lösungen scheinen es auch zu riskieren.

Dies hängt damit zusammen, dass Sie Stile für einzelne Komponenten importieren können. Wenn die Stile für Komponenten in sich geschlossen wären, könnten die Benutzer das globale Zurücksetzen/die globalen Stile aktivieren oder deaktivieren.

Situation gerade:

• Das Entfernen von globalen Zurücksetzungen und Stilen ist nicht möglich, da dies eine bahnbrechende Änderung wäre.
• Das Importieren von Stilen für einzelne Komponenten funktioniert derzeit nicht, da sie manchmal versteckte Abhängigkeiten aufweisen und auf globalen Stilen beruhen.

Wie könnten wir die Komponenten auf bruchsichere Weise in sich geschlossen machen? Ich denke, eine Lösung könnte darin bestehen, Storybook zu verwenden, um einige isolierte visuelle Regressionstests einzurichten.

Sie könnten Snapshots mit eingeschlossenen globalen Stilen erstellen, dann die globalen Stile entfernen und Stile in den komponentenlosen Dateien hinzufügen, bis die Tests bestanden sind, um sicherzustellen, dass der Stil mit oder ohne den globalen Stilen identisch ist.

ref #4331 #13459

_Entschuldigung für das Erstellen eines halbduplizierten Problems . Um das Gespräch zu festigen, stelle ich hier meine etwas anderen Fragen noch einmal._

Was wäre, wenn die Community die Arbeit tun könnte, um Komponentenstile so umzustellen, dass sie nicht mehr von globalen Stilen abhängig sind?

Ein Ansatz (danke @DylanVann):

1. Fügen Sie automatisierte visuelle Regressionstests für alle Komponenten hinzu
2. Refaktorieren Sie Komponentenstile, um zuvor globale Stile auf nicht-globale Weise zu verwenden
   
   
   
   • Ich mag den Ansatz von [class="ant-"] { ... } , aber wahrscheinlich gibt es hier viele Möglichkeiten
   
   
3. Bestätigen Sie keine wesentlichen Änderungen an Komponenten
4. Bieten Sie base.less von heute mit globalen Stilen als Opt-in-Import für diejenigen an, die darauf angewiesen sind

Ist Ant offen für:

1. PR(s) für diese Arbeit überprüfen und möglicherweise akzeptieren?
2. Akzeptieren Sie den Kompromiss, einen Opt-in-Import für diejenigen Verbraucher bereitzustellen, die derzeit auf die globalen Stile angewiesen sind?

Irgendein Update?

Hi!
Ich habe dies gelöst, indem ich Komponentenstile auf andere Weise importiert habe.

Anfangs importierte ich die Stile wie folgt:
import 'antd/lib/button/style/css';

Aber das css.js importiert nicht nur die Stile der Schaltflächen, sondern importiert auch allgemeine Stile, dies ist der Inhalt:

"use strict";

// General styling (body, h1, h2..)
require("../../style/index.css");

// Button styles
require("./index.css");

Also habe ich es gelöst, indem ich einfach die Datei index.css wie folgt importiert habe:
import 'antd/lib/button/style/index.css';

Schöner Fund!

Gibt es komplexere Komponenten, die von mehr als einer index.css Datei abhängen?
Gibt es Komponenten, die ohne die Hauptdatei für allgemeine Stile kaputt gehen würden?

Schöner Fund!

Danke 😄

Gibt es komplexere Komponenten, die von mehr als einer index.css Datei abhängen?

Vielleicht würde ich in diesem Fall alle Dateien importieren, ich denke, es wären nicht zu viele.

Gibt es Komponenten, die ohne die Hauptdatei für allgemeine Stile kaputt gehen würden?

Es funktionierte gut mit Tasten (die einzige Komponente, die ich verwendet habe).
Aber vielleicht könnten einige Komponenten diese Stile verwenden, das muss ich mir ansehen.

Ich mache es genauso wie @fedebabrauskas , und alles scheint gut zu funktionieren.

@fedebabrauskas Es scheint, als wäre die Animation für die Komponente nicht aktiviert (ich habe Popover ausprobiert, die Stile sind in Ordnung, aber es gibt keine Animation)

Ok, ich muss zugeben, dass ich mir die weniger Dateistruktur von antd nicht so gründlich angesehen habe, also kann vielleicht jemand etwas Licht ins Dunkel bringen:

Wie schwerwiegend ist es, einfach nur die less-Datei der Komponente aufzunehmen? ZB mach sowas wie

import { Select } from 'antd';
import 'antd/lib/select/style/index.less';

Nach einem Schnelltest _scheint_ es zu funktionieren, das hat mich neugierig gemacht...
Ich bin mir sicher, dass dies mit Updates brechen wird, aber die anderen Lösungen scheinen es auch zu riskieren.

Dies ist ein Lebensretter!
Ich hatte import 'antd/dist/antd.css' verwendet; innerhalb der Komponente und das hat die globalen Stile durcheinander gebracht.
Habe bei Google gesucht und dieses Problem gefunden.
Ich brauchte nur die Stile für die Switch-Komponente, also habe ich versucht, 'antd/lib/switch/style/index.less' zu importieren; und bumm! es funktionierte!!
Vielen Dank Kumpel!!
Code Implementierung
Bereitgestelltes Portfolio

Also, nur um zu bestätigen, dass es ab heute nicht möglich ist, index.css NICHT zu importieren?

Ich benutze Gatbsy und mein global.css wird von Ameisen index.css überschrieben.

Als Workaround habe ich gerade ein Postinstall-Skript wie unten gezeigt erstellt

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="8">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};


removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

Hinweis : Ich verwende babel-plugin-import für On-Demand-Komponentenimporte

Als Workaround habe ich gerade ein Postinstall-Skript wie unten gezeigt erstellt

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="9">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};

removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

Das Skript entfernt die Basisstile, entfernt aber immer noch nicht die globalen antd-Stile. Importieren Sie Stile für jede antd-Komponente oder eine einzelne dist-CSS-Datei.

@himanshuc3 Ich verwende babel-plugin-import für On-Demand-Komponentenimporte

@fedebabrauskas Es scheint, als wäre die Animation für die Komponente nicht aktiviert (ich habe Popover ausprobiert, die Stile sind in Ordnung, aber es gibt keine Animation)

gleicher Fall, aber mit Collapse

babel-plugin-import importiert globale Stile,
und Importieren einer bestimmten Komponenten-CSS-Datei wie folgt:
import 'antd/lib/date-picker/style/index.css';
bricht den Datepicker (er öffnet und schließt sich auf seltsame und unerwartete Weise.)

Irgendein Workaround dazu?

omg, ich verwende eine Übertragungskomponente, die auf vielen anderen Komponenten basiert ... Erkenne jetzt nur, dass alle meine dunklen Typografie-Header nicht meinen Primärfarben usw. folgen usw.

+1

+1

Dies ist eine Problemumgehung, die ich in einer Demo-App verwendet habe, die Ant Design zusammen mit anderen Komponentenbibliotheken verwendet:

index.scss :

.antPage {
  <strong i="8">@import</strong> '~antd/dist/antd.min';
  ...
}

Jetzt haben alle globalen Stile für Ant einen Namensraum, und ich kann dies einfach auf meiner Seite mit Ant-Stil tun:

function AntPage() => <div className="antPage">...</div>

Aber dann bekomme ich ein anderes Problem, da einige der von dieser Bibliothek bereitgestellten Komponenten nicht wirklich mit Namespace-Stilen zurechtkommen :(

Zum Beispiel rendert DatePicker das Markup _außerhalb_ des Körpers, sodass die resultierende Komponente nicht innerhalb von .antPage und die Stile daher nicht funktionieren. Gleiches gilt für Dropdowns und andere Komponenten, die zusätzliches Markup benötigen, um zu funktionieren.

Wenn ich dann die oben vorgeschlagene Problemumgehung versuche:

import 'antd/es/date-picker/style/index.css'
import 'antd/es/dropdown/style/index.css'
import 'antd/es/input/style/index.css'

Es funktioniert _fast_, aber es fängt an, sich seltsam zu verhalten: Wenn ich eine Datumsauswahl fokussiere, wird es nicht angezeigt, sondern bleibt bei opacity: 0 . Sobald es den Fokus verliert, erscheint die schwebende Datumsauswahl...

Ich bin mir nicht ganz sicher, wie sich das separate Laden der Stile auf das Verhalten auswirken würde, es könnte sich um einen anderen Fehler handeln.

Schauen wir auf jeden Fall, ob eine nicht-globale Style-Version den Trick für gut tun könnte :+1:

@OscardR Ich glaube, dieses Problem hat damit zu tun, dass die Bewegungs-CSS-Dateien <strong i="6">@import</strong> 'antd/es/style/core/motion.less'; für mich behoben wurden.

Wenn jemand ähnliche Probleme hat und alle Stile importieren möchte, aber nicht die Globals:

Ich habe alle .less Dateien importiert und in eine antd.less Datei abgelegt, dann importiere ich diese Datei anstelle der dist-Dateien, die die globalen Stile enthalten.

https://gist.github.com/SPDUK/b93e9c28c11e41d5f3b6d9ad9fc7be36

Haben wir eine andere Möglichkeit, wenn ich kein weniger Benutzer bin? Ich verwende Sass und möchte nicht weniger hinzufügen, nur um dies zu patchen. Ich möchte nur die minimalen CSS-Dateien laden können, um die Select-Komponente auszuführen

Fast 3 Jahre lang sehe ich dieses Problem ganz oben auf meiner Github-Homepage.

Ich benutze seit langem keine Ameise mehr. Kann ich das einfach schließen und die Community oder Betreuer woanders weiterverfolgen lassen?

Alles über Remove global Styles , jeder konzentriert sich jetzt darauf, bitte nur unsubscribe dieses Problem, wenn Sie nicht mehr darüber wissen möchten, danke!

Ich glaube nicht, dass es die beste Idee ist. Viele von uns verwenden immer noch antd und würden dieses Problem gerne lösen.
Es ist gut, ein Hauptthema in der ganzen Geschichte zu haben.