المكونات المصممة

تعد المكونات الأنماط إحدى الطرق الجديدة لاستخدام CSS في JavaScript الحديث. من المفترض أن تكون خليفة لـ CSS Modules ، وهي طريقة لكتابة CSS يتم تحديد نطاقها لمكون واحد ، ولا تتسرب إلى أي عنصر آخر في الصفحة

لمحة تاريخية

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

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

المعالجات الأولية مثلساسوآخرون ساعدوا كثيرًا في إبطاء اعتماد الأطر ، وتنظيم الكود بشكل أفضل ، مثل الاتفاقياتBEMوSMACSSنما في الاستخدام ، خاصة ضمن الفرق.

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

استكشفت الأدوات الجديدة طرقًا جديدة للقيام بـ CSS-in-JS ونجح القليل منها مع زيادة الشعبية:

  • رد الفعل ستايل
  • jsxstyle
  • الراديوم

و اكثر.

إدخال المكونات الأنماط

واحدة من أكثر هذه الأدوات شيوعًا هيالمكونات المصممة.

من المفترض أن تكون خليفة لـوحدات CSS، وهي طريقة لكتابة CSS مخصصة لمكون واحد ، ولا تتسرب إلى أي عنصر آخر في الصفحة.

(المزيد عن وحدات CSSهناوهنا)

تسمح لك "المكوّنات الأنماط" بكتابة CSS عادي في مكوناتك دون القلق بشأن تضارب أسماء الفئات.

تثبيت

تثبيت المكونات المصممة باستخدامnpmأوغزل:

npm install styled-components
yarn add styled-components

هذا هو! الآن كل ما عليك فعله هو إضافة هذا الاستيراد:

import styled from 'styled-components'

المكون الأول الخاص بك على غرار

مع الstyledتم استيراد كائن ، يمكنك الآن البدء في إنشاء مكونات ذات أنماط. هذا هو أول واحد:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Buttonهو الآنتتفاعلعنصر في كل عظمته.

قمنا بإنشائه باستخدام وظيفة الكائن المصمم ، والتي تسمىbuttonفي هذه الحالة ، وتمرير بعض خصائص CSS في ملفنموذج حرفي.

يمكن الآن عرض هذا المكون في حاويتنا باستخدام صيغة React العادية:

render(<Button />)

تقدم "المكونات الأنماط" وظائف أخرى يمكنك استخدامها لإنشاء مكونات أخرى ، وليس فقطbutton، مثلsectionوh1وinputواشياء أخرى عديدة.

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

استخدام الدعائم لتخصيص المكونات

عندما تقوم بتمرير بعض الدعائم إلى مكون Styled Component ، فسيتم تمريرها إلى ملفDOMشنت العقدة.

على سبيل المثال ، إليك كيفية تمرير الامتدادplaceholderوtypeالدعائم لinputعنصر:

const Input = styled.input`
  //...
`

render( <div> <Input placeholder="…" type=“text” /> </div> )

سيفعل هذا ما تعتقده ، بإدراج تلك الخاصيات كسمات HTML.

الدعائم بدلاً من تمريرها بشكل أعمى إلىDOMيمكن أيضًا استخدامها لتخصيص مكون بناءً على قيمة prop. هذا مثال:

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`

render( <div> <Button>A normal button</Button> <Button>A normal button</Button> <Button primary>The primary button</Button> </div> )

وضعprimaryالدعامة تغير لون الزر.

تمديد مكون نمطي موجود

إذا كان لديك مكون واحد وترغب في إنشاء مكون مشابه ، بتصميم مختلف قليلاً ، يمكنك استخدامهextend:

const Button = styled.button`
  color: black;
  //...
`

const WhiteButton = Button.extend </span><span style="color:#e6db74"> color: white; </span><span style="color:#e6db74">

render( <div> <Button>A black button, like all buttons</Button> <WhiteButton>A white button</WhiteButton> </div> )

إنه CSS عادي

في Styled Components ، يمكنك استخدام CSS التي تعرفها وتحبها بالفعل. إنه CSS عادي. إنها ليست CSS زائفة ولا CSS مضمنة بحدودها.

يمكنك استخدام استعلامات الوسائط ،التعشيشوأي شيء آخر قد تحتاجه.

فيما يلي مثال على استعلام عن الوسائط:

const Button = styled.button`
  color: green;
  @media screen and (max-width: 800px) {
    color: black;
  }
`

استخدام بادئات البائع

تضيف Styled Components تلقائيًا جميع بادئات البائع المطلوبة ، لذلك لا داعي للقلق بشأن هذه المشكلة.

استنتاج

هذا كل شيء في مقدمة "المكونات المصممة"! ستساعدك هذه المفاهيم على فهم المفهوم ومساعدتك على بدء تشغيل هذه الطريقة في استخدام CSS في JavaScript.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: