Fotografie de copertă de Buna sunt eu Nik ?? pe Unsplash

Îmi place React și componentele stilate. Este ca și cum ai construi lucruri cu cărămizi lego în ceva mai mare și întreg.

Componentele stilate sunt minunate și se potrivesc perfect cu React. Chiar sunt. Și sunt, de asemenea, ușor de înțeles … cu adevărat.

În acest articol voi descompune tot ceea ce trebuie să știți pentru a începe (și nu numai pentru a începe) în trei părți. Nu profund tehnic și pur și simplu explicat. Dacă știți aceste trei lucruri, știți suficient pentru a utiliza Componente stilizate în proiectul dvs. fără probleme.

Cele trei lucruri sunt:

1. Cum să creați și să utilizați o componentă stilată.
2. Cum să vă modificați CSS condiționat cu recuzită
3. Cum să creați Global Styling.

Le voi parcurge unul câte unul acum.

1. Cum se creează și se utilizează o componentă stilizată

Mă voi scufunda direct în el. Mai întâi trebuie să instalați Componente stilizate în proiect. Faceți acest lucru tastând:

npm i styled-components

Acum ești bine să pleci. Puteți utiliza Componente stilizate în proiectele dvs. Mai jos este un cod pe care îl voi explica mai jos. Uitați-vă bine la el și continuați să citiți mai jos codul.

import React from "react";
import styled from "styled-components";

const StyledLogin = styled.div`
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 2px solid #000;
  border-radius: 20px;
  background: #eee;

  h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
  }

  button {
    background: green;
    color: #fff;
    padding: 10px;
    margin: 5px;
    width: 150px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
  }
`;

const StyledInput = styled.input`
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  width: 150px;
  box-sizing: border-box;
`;

const Login = () => (
  <StyledLogin>
    <h2>Login</h2>
    <StyledInput type="text" placeholder="email" />
    <StyledInput type="password" placeholder="password" />
    <button>Login</button>
  </StyledLogin>
);

export default Login;

Codul de mai sus va crea o componentă numită Login care arată astfel:

Nimic extraordinar, nimic special. Doar o componentă de autentificare pentru a ne ajuta să înțelegem mai bine componentele stilate. Ok – primul lucru pe care îl veți observa în codul de mai sus este că trebuie să spunem cumva React că dorim să utilizăm Componente stilizate. Facem acest lucru importându-l astfel:

import styled from “styled-components”;

Acum am importat un obiect numit styled pe care le putem folosi pentru a ne stiliza componentele. Acest obiect are proprietăți diferite pe care le puteți utiliza în funcție de ceea ce doriți să coafați. Dacă este un div, ca în exemplul nostru, pur și simplu accesați proprietatea div de pe styled obiect. Ca astfel: styled.div

Dacă doriți să stilizați un buton, puteți tasta pur și simplu styled.button in schimb.
Sau dacă a fost o etichetă h2, puteți tasta styled.h2 … ai înțeles!

Aceste proprietăți dețin funcții cu care puteți apela literale șablon etichetate. Adică putem trimite datele către aceste funcții folosind back-ticks și apoi să plasăm CSS între aceste back-ticks (``). De asemenea, creați o const pentru a păstra componenta stilată. Deci, dacă dorim să creăm o componentă stilizată pentru componenta noastră de autentificare, trebuie doar să scriem codul de mai jos:

const StyledLogin = styled.div`
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 200px;
  height: 200px;
  // And more CSS code below
`;

Pe scurt, pentru a crea stilul pentru un element div cu Componente stilizate, trebuie doar să utilizați această sintaxă:

const SomeName = styled.div` CSS code goes here … `;

Apoi îl puteți folosi doar ca componentă obișnuită:

<SomeName> Your other code here … </SomeName>

Puteți crea oricâte dintre aceste componente stilizate aveți nevoie. În exemplul de mai sus am creat două componente stilizate, una care se numește StyledLogin și unul care se numește StyledInput.

Încă un lucru despre crearea unei componente stilizate standard, care este bine de știut, este partea de cuibărire. Componentele cu stil au capacitatea de a cuibări stilul la fel cum puteți face în, de exemplu, SASS.

Puteți vedea în codul de mai sus că mi-am imbricat stilul pentru h2 si buton elemente. Acest lucru este grozav în atât de multe feluri! Acesta va face codul dvs. mult mai structural și mai curat. Puteți vedea cu ușurință ce stil aparține componentei. De asemenea, izolați stilul doar pentru acea componentă, adică pentru cealaltă h2 și buton elementele din aplicația dvs. nu vor fi afectate.

Deci, atunci când are sens, folosiți cuibărirea pentru a stiliza elementele. Totuși, nu are întotdeauna sens. Nu trebuie să creați o componentă complet nouă pentru fiecare element mic. Atunci, cuiburile de acest fel sunt utile.

Asta e unul – doi de plecat.

2. Cum să vă modificați CSS condiționat cu recuzită.

Componentele stilizate pot primi elemente de recuzită. La fel ca o componentă obișnuită. Trecând elemente de recuzită la componenta dvs. de stil, puteți face unele stiluri CSS condiționate. Smooooooth …? ‍♂️

Să presupunem că vrem să schimbăm culoarea câmpului de introducere a parolei în funcție de dacă utilizatorul a introdus parola greșită sau nu.

Ok, îmi dau seama că aceasta este o soluție cu adevărat simplificată și ar exista mult mai mult decât un simplu accesoriu implicat în chestii de acest gen. Dar, de dragul acestui articol tutorial, să spunem că o facem așa.

Dacă avem un accesoriu care se numește correct setat la fals, ne transformăm caseta de text în roșu. Să aruncăm o privire la codul de mai jos. Am lăsat în mod intenționat codul de stil pentru întreaga componentă Login pentru a economisi spațiu. Deci, să ne prefacem că există și că este la fel ca mai sus.

const StyledInput = styled.input`
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
  width: 150px;
  box-sizing: border-box;
  background: ${prop => prop.correct ? 'white' : 'red'};
`;

const Login = () => (
  <StyledLogin>
    <h2>Login</h2>
    <StyledInput correct={true} type="text" placeholder="email" />
    <StyledInput correct={false} type="password" placeholder="password" />
    <button>Login</button>
  </StyledLogin>
);

Acest lucru ne va oferi acest rezultat:

În primul rând, aruncați o privire la Login componentă. Si StyledInput componente. Am creat un accesoriu care se numește correct și trec înăuntru true și false la cele două componente diferite. Cel care primește Adevărat valoarea va fi afișată în alb.
Pentru a accesa această valoare prop în CSS Componentul dvs. stilizat, puteți utiliza codul de mai jos:

background: ${prop => prop.correct ? ‘white’ : ‘red’};

Pur și simplu creați un operator ternar în interiorul unei funcții săgeată înconjurat de ${} spunând acestui Component stilizat să selecteze culoarea albă dacă prop.correct este false. Și folosiți culoarea roșie dacă prop.correct este true. Simplu!

Puteți face acest lucru cu orice proprietate CSS pe care o doriți! ✌️ Și așa faci CSS condiționat cu recuzită în Componente stilizate.

Două jos – unul de plecat.

3. Cum se creează Global Styling.

Ultimul lucru esențial pe care trebuie să-l știți pentru a utiliza componentele stilizate este cum să creați un stil global.

Stilul global se realizează utilizând o funcție specială în acest scop din biblioteca Styled Components. Se numeste createGlobalStyle și îl importi așa:

import { createGlobalStyle } from ‘styled-components’;

Apoi, puteți crea o componentă cu stil global astfel:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background: #000;
    color: #fff;
  }
`;

const App = () => {
  <>
    <GlobalStyle />
    <Login />
  </>
}

Așezați doar componenta de stil global la nivelul superior al aplicației. Apoi, va folosi stilul în toată aplicația. În acest caz, presupun că se numește Componenta de nivel superior App. De asemenea, puteți utiliza elemente de recuzită și puteți face niște CSS condiționate în componente stilizate globale. La fel ca componentele stilate obișnuite.

Concluzie

Aia este! Componentele stilate sunt mai multe decât aceasta, dar cred că acestea sunt într-adevăr elementele esențiale pe care trebuie să le cunoașteți pentru utilizarea componentelor stilate.

Dacă sunteți interesat să aflați mai multe, vă recomand cu mare drag să accesați site-ul web https://www.styled-components.com/docs/ și citiți documentele acolo.

De asemenea, vă mulțumesc că ați citit această postare. Sunt un dezvoltator din Suedia căruia îi place să predea și să codeze. De asemenea, creez cursuri despre React și Gatsby online. Mă găsești pe Udemy. Doar căutați-l pe Thomas Weibenfalk sau conectați-mă pe Twitter @weibenfalk

Am și un canal Youtube unde învăț lucruri gratuite, verifică-l aici.