دليل تجاوز أنماط Ant Design CSS

توفر هذه الصفحة دليلاً مفصلاً حول تجاوز أنماط Ant Design، بما في ذلك كيفية تخصيص أنماط المكونات وتكوين السمات ومعالجة أولويات CSS.

تخصيص السمات (Theme Customization)

تسمح Ant Design بتخصيص النمط العام عن طريق تكوين سمة. يتم تحقيق تكوين السمات بشكل أساسي من خلال متغيرات Less.

طريقة التكوين

قم بتثبيت less و less-loader في مشروعك:
```
npm install less less-loader --save-dev
```

أنشئ vue.config.js في جذر المشروع (لمشاريع Vue CLI) أو قم بتعديل config-overrides.js (لمشاريع CRA)، وأضف الكود التالي:

const { defineConfig } = require('vue-cli-plugin-antd-config');
module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
});

متغيرات Less

توفر Ant Design سلسلة من متغيرات Less لتخصيص السمات. تشمل المتغيرات الشائعة:

المتغير	الوصف	القيمة الافتراضية
`@primary-color`	اللون الأساسي	`#1890ff`
`@link-color`	لون الرابط	`@primary-color`
`@success-color`	لون النجاح	`#52c41a`
`@warning-color`	لون التحذير	`#faad14`
`@error-color`	لون الخطأ	`#f5222d`
`@font-size-base`	حجم الخط الأساسي	`14px`
`@heading-color`	لون العناوين	`rgba(0, 0, 0, 0.85)`
`@text-color`	لون النص الأساسي	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	لون النص الثانوي	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	لون حالة التعطيل	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	نصف قطر حدود المكونات	`4px`
`@border-color-base`	لون الحدود	`#d9d9d9`
`@box-shadow-base`	ظل المكونات	`0 2px 8px rgba(0, 0, 0, 0.1)`

تجاوز الأنماط (Style Overriding)

في بعض الحالات، قد تحتاج إلى تجاوز أنماط Ant Design بشكل أدق. يمكن تحقيق ذلك من خلال زيادة خصوصية محددات CSS أو استخدام !important.

أولوية CSS

تحدد قواعد أولوية CSS أي قاعدة يتم تطبيقها عندما يتم تطبيق قواعد نمط متعددة على نفس العنصر. الأولوية من الأعلى إلى الأقل هي:

الأنماط المضمنة (Inline styles)
محددات المعرف (#id)
محددات الفئات (.class)، والفئات المزيفة (:hover) ومحددات السمات ([type="text"])
محددات العناصر (div, h1, إلخ) والعناصر المزيفة (::before, ::after)
محدد الكل (*) والمجمعات (descendant, child, adjacent sibling, general sibling)

استخدام !important

يمكن استخدام !important لزيادة أولوية قاعدة نمط معينة، مما يجبرها على التنفيذ. ومع ذلك، لا ينصح بالإفراط في استخدامه ويجب أن يكون كخيار أخير.

.ant-btn {
  background-color: red !important;
}

خاتمة

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