Ant-design: Hapus Gaya global

Anda juga dapat mencoba menggunakan komponen langsung dari https://github.com/react-component.
antd dibangun di atas mereka , dan mereka adalah unstyled.

Tolong atasi ini. Ini adalah pemblokir keras untuk aplikasi kami.

Hai, apakah kalian telah memberikan pemikiran tentang menggunakan perpustakaan CSS-in-JS seperti emosi atau komponen gaya. Itu bisa memecahkan banyak masalah seperti impor global untuk gaya dan pelingkupan gaya ke komponen semut. Plus itu juga bisa meningkatkan tema (gaya dinamis). Maaf jika ini telah dibahas di tempat lain, saya tidak dapat menemukan diskusi yang relevan.

@divyanshu013 Saya pikir saya membacanya bukan prioritas utama bagi mereka karena antd dimaksudkan untuk memasukkan spesifikasi gaya antd bukan hanya komponen/javascript. Plus, ini secara teknis dimaksudkan untuk menjadi monorepo untuk proyek internal mereka, jadi tema untuk merek orang lain secara otomatis bukan prioritas utama. Yang mengatakan, saya bersama Anda, saya berharap itu menggunakan komponen gaya daripada gaya global.

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

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

Oke, saya harus mengakui bahwa saya belum melihat struktur file antd yang lebih sedikit, jadi mungkin seseorang dapat menjelaskan hal ini:

Seberapa besar pelanggaran untuk hanya menyertakan file komponen yang lebih sedikit? Misalnya melakukan sesuatu seperti

impor { Pilih } dari 'antd';
impor 'antd/lib/select/style/index.less';

Berdasarkan tes cepat, tampaknya berhasil, sehingga membuat saya penasaran ...
Saya yakin ini akan rusak dengan pembaruan, tetapi solusi lain tampaknya juga mengambil risiko.

Ini terkait dengan kemampuan untuk mengimpor gaya untuk masing-masing komponen. Jika gaya untuk komponen mandiri maka orang dapat memilih ikut atau keluar dari pengaturan ulang/gaya global.

Situasi sekarang:

• Menghapus pengaturan ulang dan gaya global tidak layak karena itu akan menjadi perubahan yang melanggar.
• Mengimpor gaya untuk masing-masing komponen saat ini tidak berfungsi karena terkadang memiliki ketergantungan tersembunyi, dan bergantung pada gaya global.

Bagaimana kita bisa membuat komponen mandiri dengan cara yang tidak putus? Saya pikir salah satu solusinya adalah menggunakan Storybook untuk menyiapkan beberapa tes regresi visual yang terisolasi.

Anda dapat membuat snapshot dengan gaya global yang disertakan, lalu menghapus gaya global, dan menambahkan gaya dalam file komponen yang lebih sedikit hingga pengujian lulus, memastikan bahwa gaya tersebut sama dengan atau tanpa gaya global.

ref #4331 #13459

_Permintaan maaf karena membuat masalah semi-duplikat . Untuk menggabungkan percakapan, saya akan mengajukan kembali pertanyaan saya yang agak berbeda di sini._

Bagaimana jika komunitas dapat melakukan pekerjaan untuk mengubah gaya komponen agar tidak lagi bergantung pada gaya global?

Satu pendekatan (terima kasih @DylanVann):

1. Tambahkan pengujian regresi visual otomatis untuk semua komponen
2. Memfaktorkan ulang gaya komponen untuk menggunakan gaya global sebelumnya dengan cara non-global
   
   
   
   • Saya suka pendekatan [class="ant-"] { ... } , tapi mungkin banyak pilihan di sini
   
   
3. Konfirmasikan tidak ada perubahan yang melanggar pada komponen
4. Tawarkan base.less hari ini, dengan gaya global, sebagai impor keikutsertaan, bagi mereka yang bergantung padanya

Apakah Ant terbuka untuk:

1. Meninjau dan berpotensi menerima PR untuk pekerjaan itu?
2. Menerima kompromi dalam menyediakan impor keikutsertaan untuk konsumen yang saat ini mengandalkan gaya global?

Perubahan apapun?

Hai, yang di sana!
Saya memecahkan ini dengan mengimpor gaya komponen dengan cara yang berbeda.

Awalnya saya mengimpor gaya seperti ini:
import 'antd/lib/button/style/css';

Tapi css.js tidak hanya mengimpor gaya tombol, juga mengimpor gaya umum, ini isinya:

"use strict";

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

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

Jadi saya menyelesaikannya dengan hanya mengimpor file index.css seperti ini:
import 'antd/lib/button/style/index.css';

Temuan yang bagus!

Apakah ada komponen yang lebih kompleks yang bergantung pada lebih dari satu file index.css ?
Apakah ada komponen yang akan rusak tanpa file gaya umum utama?

Temuan yang bagus!

terima kasih

Apakah ada komponen yang lebih kompleks yang bergantung pada lebih dari satu file index.css ?

Mungkin dalam hal ini saya akan mengimpor semua file, saya pikir itu tidak akan terlalu banyak.

Apakah ada komponen yang akan rusak tanpa file gaya umum utama?

Ini bekerja dengan baik dengan tombol (satu-satunya komponen yang saya gunakan).
Tapi mungkin beberapa komponen bisa menggunakan gaya itu, ini adalah sesuatu yang perlu saya periksa.

Saya melakukannya dengan cara yang sama seperti @fedebabrauskas , dan semuanya tampak bekerja dengan baik.

@fedebabrauskas Sepertinya animasi untuk komponen tidak akan diaktifkan (saya mencoba Popover, gayanya baik-baik saja tetapi tidak memiliki animasi)

Oke, saya harus mengakui bahwa saya belum melihat struktur file antd yang lebih sedikit, jadi mungkin seseorang dapat menjelaskan hal ini:

Seberapa besar pelanggaran untuk hanya menyertakan file komponen yang lebih sedikit? Misalnya melakukan sesuatu seperti

impor { Pilih } dari 'antd';
impor 'antd/lib/select/style/index.less';

Berdasarkan tes cepat, _tampaknya_ berhasil, sehingga membuat saya penasaran...
Saya yakin ini akan rusak dengan pembaruan, tetapi solusi lain tampaknya juga mengambil risiko.

Ini adalah penyelamat hidup!
Saya telah menggunakan import 'antd/dist/antd.css'; di dalam komponen dan itu mengacaukan gaya global.
Mencari di Google dan menemukan masalah ini.
Saya hanya membutuhkan gaya untuk komponen sakelar jadi saya mencoba import 'antd/lib/switch/style/index.less'; dan booming! itu berhasil!!
Terima kasih banyak sobat!!
Implementasi kode
Portofolio yang diterapkan

Jadi, hanya untuk mengonfirmasi, mulai Hari ini, TIDAK mungkin untuk TIDAK mengimpor index.css ?

Saya menggunakan Gatbsy, dan global.css sedang ditimpa oleh semut index.css .

Sebagai solusinya - saya baru saja membuat skrip pascainstal seperti di bawah ini

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"
}

Catatan : Saya menggunakan babel-plugin-import untuk impor komponen sesuai permintaan

Sebagai solusinya - saya baru saja membuat skrip pascainstal seperti di bawah ini

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"
}

Script menghapus gaya dasar tetapi masih tidak menghilangkan gaya semut global. Apakah Anda mengimpor gaya untuk setiap komponen antd atau satu file css dist.

@himanshuc3 Saya menggunakan babel-plugin-import untuk impor komponen sesuai permintaan

@fedebabrauskas Sepertinya animasi untuk komponen tidak akan diaktifkan (saya mencoba Popover, gayanya baik-baik saja tetapi tidak memiliki animasi)

kasus yang sama, tetapi dengan Runtuh

babel-plugin-import mengimpor gaya global,
dan mengimpor file css komponen tertentu seperti ini:
import 'antd/lib/date-picker/style/index.css';
memecahkan Datepicker (itu membuka dan menutup sendiri dengan cara yang aneh dan tidak terduga.)

Ada solusi tentang itu?

omg saya menggunakan komponen transfer yang bergantung pada banyak komponen lain... Baru sadar sekarang bahwa semua header tipografi gelap saya tidak mengikuti warna utama saya dll dll..

+1

+1

Ini adalah solusi yang saya gunakan pada aplikasi demo yang menggunakan Ant Design bersama pustaka komponen lainnya:

index.scss :

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

Jadi sekarang semua gaya global untuk Ant diberi namespace, dan saya bisa melakukan ini di halaman gaya Ant saya:

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

Tapi kemudian saya mendapatkan masalah lain, karena beberapa komponen yang disediakan oleh perpustakaan ini tidak dapat mengatasi gaya namespace :(

Misalnya DatePicker me-render markup _outside_ body, sehingga komponen yang dihasilkan tidak berada di dalam .antPage dan oleh karena itu gaya tidak berfungsi. Sama untuk dropdown dan komponen lain yang membutuhkan markup ekstra agar berfungsi.

Kemudian, jika saya mencoba solusi yang disarankan di atas:

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

Ini _almost_ berfungsi, tetapi mulai berperilaku aneh: ketika saya memfokuskan pemilih tanggal, itu tidak muncul, tetapi tetap dengan opacity: 0 . Kemudian, segera setelah kehilangan fokus, pemilih tanggal mengambang muncul...

Tidak yakin bagaimana memuat gaya secara terpisah akan memengaruhi perilaku, itu mungkin bug yang berbeda.

Bagaimanapun, mari kita lihat apakah versi gaya non-global dapat melakukan trik untuk selamanya :+1:

@OscardR Saya yakin masalah ini ada hubungannya dengan tidak menyertakan file css gerak <strong i="6">@import</strong> 'antd/es/style/core/motion.less'; memperbaikinya untuk saya.

Jika ada orang lain yang memiliki masalah serupa dan ingin mengimpor semua gaya tetapi tidak memiliki global:

Saya telah mengimpor semua file .less dan menempatkannya ke dalam file antd.less , lalu saya mengimpor file itu alih-alih file dist yang menyertakan gaya global.

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

Apakah kami memberikan opsi lain jika saya bukan pengguna yang kurang? Saya menggunakan sass dan tidak ingin menambahkan lebih sedikit hanya untuk menambal ini. Saya ingin dapat memuat hanya file css minimal untuk menjalankan komponen Pilih

Hampir 3 tahun saya melihat masalah ini muncul di atas beranda Github saya.

Saya sudah lama berhenti menggunakan semut. Bisakah saya menutup ini dan membiarkan komunitas atau pengelola mengikutinya di tempat lain?

Apa pun tentang Remove global Styles , semua orang sekarang fokus pada ini, harap hanya unsubscribe masalah ini jika Anda tidak ingin tahu lebih banyak tentangnya, terima kasih!

Saya tidak berpikir itu ide terbaik. Banyak dari kita masih menggunakan antd dan ingin masalah ini diselesaikan.
Ada baiknya memiliki isu utama akan semua sejarah.