أفضل طريقة لتخصيص تنسيق نص الرابط؟

ما هي أفضل طريقة لتخصيص تنسيق نص الرابط؟ يبدو أن تعديل CSS ليس هو النهج الأفضل لأن التغييرات ستفقد عند تحديث الإضافة.

أود أن أجعله عريضًا وأغير لون النص ليتناسب مع موضوع الموقع، مما سيساعده على الاندماج.

في الوقت الحالي، يبدو الرابط هكذا -

وأود أن يبدو هكذا -

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

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

شكرًا لك! لقد قمت بذلك الآن، وقد سار الأمر على ما يرام.

من باب الفضول، كيف يختار الموقع أي ملف CSS يستخدم؟ إذا كان مكون السمة القياسي يحتوي على CSS يقوم بتعيين لون الخط إلى $header_primary -

.headerLink {
  list-style: none;
  a {
    padding: 6px 10px;
    color: $header_primary;
    font-size: $font-up-1;
  }
}

فكيف يعرف أنه يجب استخدام CSS من مكوني الجديد بدلاً من ذلك؟

.headerLink {
  list-style: none;
  a {
    color: #7A7A7A;
  }
}

مرحبًا @Johani - هل لا يزال الأمر كذلك؟ يبدو أن مثيلي متردد في اعتماد لون $header_primary، وغريبًا حتى عندما أقوم بتعيين $primary إلى اللون الذي أريده (الأبيض)، يظل أسودًا عنيدًا :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

من المرجح أن الأمر يتعلق بالانتقال من SCSS إلى متغيرات CSS لإعلانات الألوان. تعيين $header_primary في CSS المخصص لا يعمل، ولكن إذا استخدمت

.custom-header-links .headerLink a {
    color: var(--header_primary);
}

سيتم التقاط اللون بشكل صحيح.

لم تنجح هذه الحلّة بالنسبة لي. هل تضيفها إلى CSS المخصص للمظهر؟

نعم، كان الأمر كذلك بالفعل. يستخدم المكون الآن الخاصية المخصصة لـ CSS، ويجب أن يحل هذه المشكلة لك @Daniel_R، كل ما عليك فعله هو تحديث المكون.