React Styled Components: Inline Styles + 3 Άλλες προσεγγίσεις στυλ CSS (με παραδείγματα)

Δεν υπάρχει κανένας σωστός τρόπος να διαμορφώσετε τα στοιχεία του React. Όλα εξαρτώνται από το πόσο περίπλοκη είναι η εφαρμογή front-end σας και με ποια προσέγγιση είστε πιο άνετη.

Υπάρχουν τέσσερις διαφορετικοί τρόποι για να σχεδιάσετε την εφαρμογή React και σε αυτήν την ανάρτηση θα μάθετε για όλα αυτά. Ας ξεκινήσουμε με ενσωματωμένο στυλ.

Ενσωματωμένο στυλ

Τα συστατικά αντίδρασης αποτελούνται από στοιχεία JSX. Αλλά επειδή δεν γράφετε τακτικά στοιχεία HTML δεν σημαίνει ότι δεν μπορείτε να χρησιμοποιήσετε την παλιά μέθοδο inline style.

Η μόνη διαφορά με το 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

); }

Επειδή το χαρακτηριστικό style είναι ένα αντικείμενο, μπορείτε επίσης να διαχωρίσετε το στυλ γράφοντάς το ως σταθερά. Με αυτόν τον τρόπο, μπορείτε να το χρησιμοποιήσετε ξανά σε άλλα στοιχεία όπως απαιτείται:

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.

Ένα από τα οφέλη από τη χρήση της προσέγγισης inline style είναι ότι θα έχετε μια απλή τεχνική στυλ που εστιάζεται στα συστατικά. Χρησιμοποιώντας ένα αντικείμενο για στυλ, μπορείτε να επεκτείνετε το στυλ σας με τη διάδοση του αντικειμένου. Στη συνέχεια, μπορείτε να προσθέσετε περισσότερες ιδιότητες στυλ σε αυτό, αν θέλετε.

Αλλά σε ένα μεγάλο και περίπλοκο έργο όπου έχετε εκατοντάδες στοιχεία 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.