مكونات React Styled: أنماط مضمنة + 3 أساليب تصميم CSS أخرى (مع أمثلة)

لا توجد طريقة واحدة صحيحة لتصميم مكونات React الخاصة بك. كل هذا يتوقف على مدى تعقيد تطبيق الواجهة الأمامية الخاص بك ، والطريقة الأكثر راحة لك.

توجد أربع طرق مختلفة لتصميم تطبيق React ، وفي هذا المنشور سوف تتعرف عليهم جميعًا. لنبدأ بتصميم مضمّن.

التصميم المضمن

تتكون مكونات التفاعل من عناصر JSX. ولكن لمجرد أنك لا تكتب عناصر HTML عادية لا يعني أنه لا يمكنك استخدام طريقة النمط المضمنة القديمة.

الاختلاف الوحيد مع JSX هو أنه يجب كتابة الأنماط المضمنة ككائن بدلاً من سلسلة.

اليك مثال بسيط:

import React from "react"; export default function App() { return ( 

Hello World

); }

في سمة النمط أعلاه ، ستخبر المجموعة الأولى من الأقواس المتعرجة المحلل اللغوي لـ JSX أن المحتوى بين الأقواس هو JavaScript (وليس سلسلة). ستعمل المجموعة الثانية من القوس المتعرج على تهيئة كائن JavaScript.

تتم كتابة أسماء خصائص النمط التي تحتوي على أكثر من كلمة في حالة الجمل بدلاً من استخدام النمط التقليدي الواصلة. على سبيل المثال ، text-alignيجب كتابة الخاصية المعتادة كما textAlignفي JSX:

import React from "react"; export default function App() { return ( 

Hello World

); }

لأن سمة النمط هي كائن ، يمكنك أيضًا فصل النمط عن طريق كتابته على هيئة ثابت. بهذه الطريقة ، يمكنك إعادة استخدامه على عناصر أخرى حسب الحاجة:

import React from "react"; const pStyle = { fontSize: '16px', color: 'blue' } export default function App() { return ( 

The weather is sunny with a small chance of rain today.

); }

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

import React from "react"; const pStyle = { fontSize: "16px", color: "blue" }; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

الأنماط المضمنة هي المثال الأساسي لـ CSS في تقنية تصميم JS.

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

لكن في مشروع كبير ومعقد حيث لديك مئات من مكونات React لإدارتها ، قد لا يكون هذا هو الخيار الأفضل لك.

لا يمكنك تحديد فئات زائفة باستخدام أنماط مضمنة. وهذا يعني :hover، :focus، :active، أو :visitedيذهب خارج النافذة بدلا من المكون.

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

أوراق أنماط CSS

عند إنشاء تطبيق create-react-appReact باستخدام ، ستستخدم حزمة الويب تلقائيًا للتعامل مع استيراد الأصول ومعالجتها.

إن الشيء العظيم في حزمة الويب هو أنه نظرًا لأنها تتعامل مع الأصول الخاصة بك ، يمكنك أيضًا استخدام importبناء جملة JavaScript لاستيراد .cssملف إلى ملف JavaScript الخاص بك. يمكنك بعد ذلك استخدام اسم فئة CSS في عناصر JSX التي تريد تصميمها ، مثل هذا:

.paragraph-text { font-size: 16px; color: 'blue'; }
import React, { Component } from 'react'; import './style.css'; export default function App() { return (  

The weather is sunny with a small chance of rain today.

); }

بهذه الطريقة ، سيتم فصل CSS عن ملفات JavaScript الخاصة بك ، ويمكنك فقط كتابة بنية CSS كالمعتاد.

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

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

جميع محددات CSS لها نفس النطاق العام. هذا يعني أنه يمكن أن يكون لمحدد واحد آثار جانبية غير مرغوب فيها ، ويكسر العناصر المرئية الأخرى لتطبيقك.

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

وحدات CSS

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

سيكون لكل مكون من مكونات React ملف CSS الخاص به ، وستحتاج إلى استيراد ملفات CSS المطلوبة إلى المكون الخاص بك.

من أجل السماح لـ React بمعرفة أنك تستخدم وحدات CSS ، قم بتسمية ملف CSS الخاص بك باستخدام [name].module.cssالاصطلاح.

هنا مثال:

.BlueParagraph { color: blue; text-align: left; } .GreenParagraph { color: green; text-align: right; }
import React from "react"; import styles from "./App.module.css"; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

عند إنشاء تطبيقك ، ستبحث حزمة الويب تلقائيًا عن ملفات CSS التي تحمل .module.cssالاسم. سيأخذ Webpack أسماء الفئات هذه ويعينها إلى اسم مترجم جديد تم إنشاؤه.

Here is the sandbox for the above example. If you inspect the blue paragraph, you’ll see that the element class is transformed into _src_App_module__BlueParagraph.

CSS Modules ensures that your CSS syntax is scoped locally.

Another advantage of using CSS Modules is that you can compose a new class by inheriting from other classes that you’ve written. This way, you’ll be able to reuse CSS code that you’ve written previously, like this:

.MediumParagraph { font-size: 20px; } .BlueParagraph { composes: MediumParagraph; color: blue; text-align: left; } .GreenParagraph { composes: MediumParagraph; color: green; text-align: right; }

Finally, in order to write normal style with a global scope, you can use the :global selector in front of your class name:

:global .HeaderParagraph { font-size: 30px; text-transform: uppercase; }

You can then reference the global scoped style like a normal class in your JS file:

Weather Forecast

Styled Components

Styled Components is a library designed for React and React Native. It combines both the CSS in JS and the CSS Modules methods for styling your components.

Let me show you an example:

import React from "react"; import styled from "styled-components"; // Create a Title component that'll render an 

tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; export default function App() { return Hello World!; }

When you write your style, you’re actually creating a React component with your style attached to it. The funny looking syntax of styled.h1 followed by backtick is made possible by utilizing JavaScript’s tagged template literals.

Styled Components were created to tackle the following problems:

  • Automatic critical CSS: Styled-components keep track of which components are rendered on a page, and injects their styles and nothing else automatically. Combined with code splitting, this means your users load the least amount of code necessary.
  • No class name bugs: Styled-components generate unique class names for your styles. You never have to worry about duplication, overlap, or misspellings.
  • Easier deletion of CSS: It can be hard to know whether a class name is already used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all of its styles get deleted with it.
  • Simple dynamic styling: Adapting the styling of a component based on its props or a global theme is simple and intuitive, without you having to manually manage dozens of classes.
  • Painless maintenance: You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
  • Automatic vendor prefixing: Write your CSS to the current standard and let styled-components handle the rest.

You get all of these benefits while still writing the same CSS you know and love – just bound to individual components.

If you’d like to learn more about styled components, you can visit the documentation and see more examples.

Conclusion

Many developers still debate the best way to style a React application. There are both benefits and drawbacks in writing CSS in a non-traditional way.

For a long time, separating your CSS file and HTML file was regarded as the best practice, even though it caused a lot of problems.

But today, you have the choice of writing component-focused CSS. This way, your styling will take advantage of React’s modularity and reusability. You are now able to write more enduring and scalable CSS.