Ant-design: إزالة الأنماط العامة

يمكنك أيضًا تجربة استخدام المكونات مباشرةً من https://github.com/react-component.
antd فوقهم ، وهم غير منظمين.

يرجى معالجة هذا. إنه مانع صعب لتطبيقنا.

مرحبًا ، هل قدمتم يا رفاق أفكارًا حول استخدام مكتبة CSS-in-JS مثل العاطفة أو المكونات المصممة. يمكن أن يحل الكثير من المشاكل مثل الاستيراد العالمي للأنماط وتحديد نطاق الأنماط لمكونات النمل. بالإضافة إلى أنه يمكن أيضًا تحسين السمات (الأنماط الديناميكية). أعتذر إذا تمت مناقشة هذا في مكان آخر ، لم أتمكن من العثور على المناقشة (المناقشات) ذات الصلة.

@ divyanshu013 أعتقد أنني قرأت أنها ليست أولوية قصوى بالنسبة لهم لأن antd يُقصد بها تضمين مواصفات نمط antd وليس فقط المكونات / جافا سكريبت. بالإضافة إلى ذلك ، هذا يعني من الناحية الفنية أن تكون monorepo لمشاريعهم الداخلية ، لذا فإن تصميم العلامات التجارية لأشخاص آخرين ليس تلقائيًا أولوية قصوى. بعد قولي هذا ، أنا معك ، أتمنى أن تستخدم مكونات مصممة على الأنماط العالمية.

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

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

حسنًا ، يجب أن أعترف أنني لم ألقي نظرة عميقة على بنية الملفات الأقل في antd ، لذلك ربما يمكن لأي شخص إلقاء بعض الضوء على هذا:

ما مدى خطورة تضمين الملف الأقل للمكون فقط؟ على سبيل المثال ، افعل شيئًا مثل

استيراد {اختر} من 'antd'؛
استيراد "antd / lib / select / style / index.less" ؛

بناءً على اختبار سريع ، يبدو أنه يعمل ، مما جعلني أشعر بالفضول ...
أنا متأكد من أن هذا سيتوقف مع التحديثات ، ولكن يبدو أن الحلول الأخرى تخاطر به أيضًا.

هذا مرتبط بالقدرة على استيراد أنماط للمكونات الفردية. إذا كانت أنماط المكونات قائمة بذاتها ، فيمكن للأشخاص الاشتراك أو إلغاء الاشتراك في إعادة التعيين / الأنماط العالمية.

الوضع الآن:

• لا يمكن إزالة عمليات إعادة التعيين والأنماط العالمية لأنها ستكون تغييرًا جذريًا.
• لا يعمل استيراد الأنماط للمكونات الفردية حاليًا لأنها تحتوي في بعض الأحيان على تبعيات مخفية وتعتمد على الأنماط العامة.

كيف يمكننا جعل المكونات محتواة بذاتها بطريقة لا تنكسر؟ أعتقد أن أحد الحلول يمكن أن يكون استخدام Storybook لإعداد بعض اختبارات الانحدار البصري المعزولة.

يمكنك إنشاء لقطات باستخدام الأنماط العامة المضمنة ، ثم إزالة الأنماط العامة وإضافة أنماط في المكون أقل من الملفات حتى تجتاز الاختبارات ، مما يضمن أن النمط هو نفسه مع الأنماط العامة أو بدونها.

المرجع # 4331 # 13459

_Apologies لإنشاء إصدار شبه مكرر . لدمج المحادثة ، سأعيد طرح أسئلتي المختلفة نوعًا ما هنا.

ماذا لو تمكن المجتمع من القيام بالعمل على نقل أنماط المكونات إلى عدم الاعتماد على الأنماط العالمية؟

نهج واحد (شكراDylanVann):

1. إضافة اختبار الانحدار البصري الآلي لجميع المكونات
2. أنماط مكونات إعادة البناء لتستخدم الأنماط العامة سابقًا بطريقة غير عالمية
   
   
   
   • يعجبني أسلوب [class="ant-"] { ... } ، لكن ربما هناك الكثير من الخيارات هنا
   
   
3. تأكد من عدم وجود تغييرات تكسير للمكونات
4. قم بتقديم base.less اليوم ، مع أنماط عالمية ، كاستيراد اختياري ، لمن يعتمدون عليه

هل النمل مفتوح لـ:

1. مراجعة وربما قبول العلاقات العامة لهذا العمل؟
2. هل تقبل الحل الوسط لتوفير خيار استيراد اختياري لهؤلاء المستهلكين الذين يعتمدون حاليًا على الأنماط العالمية؟

أي تحديث؟

أهلا!
لقد قمت بحل هذا عن طريق استيراد أنماط المكونات بطريقة مختلفة.

في البداية كنت أستورد الأنماط مثل هذا:
import 'antd/lib/button/style/css';

لكن هذا css.js ليس فقط أنماط زر الاستيراد ، بل أيضًا استيراد الأنماط العامة ، هذا هو المحتوى:

"use strict";

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

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

لذلك قمت بحلها عن طريق استيراد ملف index.css مثل هذا:
import 'antd/lib/button/style/index.css';

بحث جميل!

هل هناك مكون أكثر تعقيدًا يعتمد على أكثر من ملف index.css ؟
هل هناك مكونات يمكن أن تنكسر بدون ملف الأنماط العام الرئيسي؟

بحث جميل!

شكرا 😄

هل هناك مكون أكثر تعقيدًا يعتمد على أكثر من ملف index.css ؟

ربما ، في هذه الحالة ، سأستورد جميع الملفات ، وأعتقد أنها لن تكون كثيرة جدًا.

هل هناك مكونات يمكن أن تنكسر بدون ملف الأنماط العام الرئيسي؟

عملت بشكل جيد مع الأزرار (المكون الوحيد الذي استخدمته).
لكن ربما يمكن لبعض المكونات استخدام هذه الأنماط ، وهذا شيء أحتاج إلى التحقق منه.

أفعل ذلك بنفس طريقة fedebabrauskas ، ويبدو أن كل شيء يعمل بشكل جيد.

fedebabrauskas يبدو أن الرسوم المتحركة للمكون لن يتم تمكينها (جربت Popover ، الأنماط جيدة ولكنها لا تحتوي على رسوم متحركة)

حسنًا ، يجب أن أعترف أنني لم ألقي نظرة عميقة على بنية الملفات الأقل في antd ، لذلك ربما يمكن لأي شخص إلقاء بعض الضوء على هذا:

ما مدى خطورة تضمين الملف الأقل للمكون فقط؟ على سبيل المثال ، افعل شيئًا مثل

استيراد {اختر} من 'antd'؛
استيراد "antd / lib / select / style / index.less" ؛

بناءً على اختبار سريع ، يبدو أنه يعمل ، مما جعلني أشعر بالفضول ...
أنا متأكد من أن هذا سيتوقف مع التحديثات ، ولكن يبدو أن الحلول الأخرى تخاطر به أيضًا.

هذا منقذ للحياة!
كنت أستخدم استيراد "antd / dist / antd.css" ؛ داخل المكون وأفسدت الأنماط العالمية.
بحثت على جوجل ووجدت هذه المشكلة.
كنت بحاجة فقط لأنماط مكون التبديل لذلك حاولت استيراد "antd / lib / switch / style / index.less" ؛ والازدهار! انها عملت!!
شكرا جزيلا يا صديقي !!
تنفيذ الكود
المحفظة المنتشرة

لذا ، فقط للتأكيد ، اعتبارًا من اليوم ، ليس من الممكن عدم استيراد index.css ؟

أنا أستخدم Gatbsy ، ويتم الكتابة فوق global.css بواسطة النمل index.css .

كحل بديل - لقد قمت للتو بإنشاء برنامج نصي لما بعد التثبيت كما هو موضح أدناه

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

ملاحظة : أنا أستخدم babel-plugin-import لاستيراد المكونات عند الطلب

كحل بديل - لقد قمت للتو بإنشاء برنامج نصي لما بعد التثبيت كما هو موضح أدناه

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

يقوم البرنامج النصي بإزالة الأنماط الأساسية ولكنه لا يزال لا يتخلص من أنماط antd العامة. هل تقوم باستيراد أنماط لكل مكون من مكونات antd أو لملف dist css الفردي.

@ himanshuc3 أستخدم babel-plugin-import لاستيراد المكونات عند الطلب

fedebabrauskas يبدو أن الرسوم المتحركة للمكون لن يتم تمكينها (جربت Popover ، الأنماط جيدة ولكنها لا تحتوي على رسوم متحركة)

نفس الحالة ، ولكن مع طي

يستورد babel-plugin-import أنماطًا عالمية ،
واستيراد ملف css مكون محدد مثل هذا:
import 'antd/lib/date-picker/style/index.css';
يكسر Datepicker (يفتح ويغلق نفسه بطرق غريبة وغير متوقعة.)

أي حل بديل عن ذلك؟

يا إلهي ، أنا أستخدم مكون النقل الذي يعتمد على العديد من المكونات الأخرى ... فقط أدرك الآن أن رأس الطباعة الغامقة لا تتبع ألواني الأساسية وما إلى ذلك.

+1

+1

هذا حل بديل استخدمته في تطبيق تجريبي يستخدم Ant Design جنبًا إلى جنب مع مكتبات المكونات الأخرى:

index.scss :

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

الآن أصبحت جميع الأنماط العامة لـ Ant ذات مسافات اسم ، ويمكنني فقط القيام بذلك على صفحتي ذات النمط Ant:

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

ولكن بعد ذلك أواجه مشكلة أخرى ، نظرًا لأن بعض المكونات التي توفرها هذه المكتبة لا يمكنها حقًا التعامل مع أنماط مسافة الأسماء :(

على سبيل المثال ، يعرض DatePicker الترميز _outside_ الخاص بالجسم ، وبالتالي فإن المكون الناتج ليس داخل .antPage وبالتالي لا تعمل الأنماط. نفس الشيء بالنسبة للقوائم المنسدلة والمكونات الأخرى التي تحتاج إلى ترميز إضافي للعمل.

بعد ذلك ، إذا جربت الحل البديل المقترح أعلاه:

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

إنه يعمل تقريبًا ، لكنه يبدأ في التصرف بشكل غريب: عندما أركز على منتقي التاريخ ، لا يظهر ، ولكنه يظل مع opacity: 0 . بعد ذلك ، بمجرد أن يفقد التركيز ، يظهر منتقي التاريخ العائم ... 😕

لست متأكدًا تمامًا من كيفية تأثير تحميل الأنماط بشكل منفصل على السلوك ، فقد يكون خطأ مختلفًا.

على أي حال ، دعنا نرى ما إذا كان إصدار الأنماط غير العامة يمكن أن يؤدي الغرض من أجل الخير: +1:

OscardR أعتقد أن هذه المشكلة تتعلق بعدم تضمين ملفات css للحركة <strong i="6">@import</strong> 'antd/es/style/core/motion.less'; إصلاحها لي.

إذا كان لدى أي شخص آخر مشكلات مماثلة ويريد استيراد جميع الأنماط ولكن ليس لديه الكواكب:

لقد قمت باستيراد جميع ملفات .less ووضعتها في ملف antd.less ، ثم قمت باستيراد هذا الملف بدلاً من ملفات dist التي تتضمن الأنماط العامة.

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

هل نسمح لأي خيار آخر إذا لم أكن مستخدمًا أقل؟ أنا أستخدم sass ولا أريد إضافة أقل فقط لتصحيح هذا. أود أن أكون قادرًا على تحميل الحد الأدنى من ملفات css فقط لتنفيذ مكون التحديد

ما يقرب من 3 سنوات أرى هذه المشكلة تظهر أعلى صفحة Github الرئيسية الخاصة بي.

لقد توقفت عن استخدام النمل لفترة طويلة الآن. هل يمكنني إغلاق هذا والسماح للمجتمع أو المشرفين بمتابعته في مكان آخر؟

أي شيء عن Remove global Styles ، الجميع يركزون الآن على هذا ، يرجى فقط unsubscribe هذه المشكلة إذا كنت لا تريد معرفة المزيد عنها ، شكرًا لك!

لا أعتقد أنها أفضل فكرة. لا يزال الكثير منا يستخدمون antd ويودون حل هذه المشكلة.
من الجيد أن يكون لديك قضية رئيسية في التاريخ كله.