הגיב רכיבים מעוצבים: סגנונות מוטבעים + 3 גישות סטיילינג אחרות של CSS (עם דוגמאות)

אין דרך אחת נכונה לעצב את רכיבי ה- React שלך. הכל תלוי עד כמה היישום המקיף שלך מורכב, ובאיזו גישה הכי נוח לך.

ישנן ארבע דרכים שונות לסגנון יישום ה- React, ובפוסט זה תלמד על כולם. נתחיל בעיצוב מוטבע.

סטיילינג מוטבע

רכיבי תגובה מורכבים מאלמנטים JSX. אבל רק בגלל שאתה לא כותב אלמנטים רגילים של HTML זה לא אומר שאתה לא יכול להשתמש בשיטת הסגנון מוטבע הישן.

ההבדל היחיד עם JSX הוא שיש לכתוב סגנונות מוטבעים כאובייקט במקום מחרוזת.

הנה דוגמה פשוטה:

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

Hello World

); }

בתכונת הסגנון לעיל, הסט הראשון של סוגריים מתולתלים יגיד למנתח ה- JSX שלך שהתוכן בין הסוגריים הוא JavaScript (ולא מחרוזת). הסט השני של סוגר מתולתל יאותחל את אובייקט JavaScript.

שמות מאפייני סגנון המכילים יותר ממילה אחת נכתבים ב- camelCase במקום להשתמש בסגנון המקווף המסורתי. לדוגמא, יש לכתוב את 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

כאשר אתה בונה יישום React באמצעות create-react-app, תשתמש באופן אוטומטי ב- webpack לטיפול בייבוא ​​ועיבוד נכסים.

הדבר הנהדר ב- webpack הוא שמכיוון שהוא מטפל בנכסים שלך, אתה יכול גם להשתמש 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!

); }

כאשר אתה בונה את האפליקציה שלך, webpack יחפש אוטומטית קבצי 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.