Eri tapoja kirjoittaa CSS React PlatoBlockchain Data Intelligencessä. Pystysuuntainen haku. Ai.

Eri tapoja kirjoittaa CSS:ää Reactissa

Aikaleima: 22. kesäkuuta 2022 10

Me kaikki tunnemme tavallisen tavan tyylisivun linkittäminen että <head> HTML-dokumentista, eikö niin? Tämä on vain yksi monista tavoista, joilla voimme kirjoittaa CSS:ää. Mutta miltä näyttää tyylitellä asioita yksisivuisessa sovelluksessa (SPA), esimerkiksi React-projektissa?

Osoittautuu, että React-sovelluksen muotoiluun on useita tapoja. Jotkut ovat päällekkäisiä perinteisen tyylin kanssa, toiset eivät niin paljon. Mutta lasketaan kaikki tavat, joilla voimme tehdä sen.

Ulkoisten tyylisivujen tuonti

Kuten nimestä voi päätellä, React voi tuoda CSS-tiedostoja. Prosessi on samanlainen kuin kuinka linkitämme CSS-tiedoston HTML-koodiin <head>:

  1. Luo uusi CSS-tiedosto projektihakemistoosi.
  2. Kirjoita CSS.
  3. Tuo se React-tiedostoon.

Tykkää tästä:

import "./style.css";

Se näkyy yleensä tiedoston yläosassa, jossa muita tuontija tapahtuu:

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

Tässä esimerkissä CSS-tiedosto tuodaan tiedostoon App.js mistä /Components/css kansio.

Kirjoita upotettuja tyylejä

Saatat olla tottunut kuulemaan, että sisäänrakennettu tyyli ei ole kovin hyvä ylläpidettävyyden ja muun kannalta, mutta tilanteita on varmasti (tässä yksi!) missä se on järkevää. Ja ylläpidettävyys on vähemmän ongelma Reactissa, koska CSS on usein jo saman tiedoston sisällä.

Tämä on erittäin yksinkertainen esimerkki sisäänrakennetusta tyylistä Reactissa:

<div className="main" style={{color:"red"}}>

Parempi lähestymistapa on kuitenkin käyttää esineitä:

  1. Luo ensin objekti, joka sisältää tyylejä eri elementeille.
  2. Lisää se sitten elementtiin käyttämällä style attribuutti ja valitse sitten tyylittävä ominaisuus.

Katsotaanpa asiaa kontekstissa:

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

Tämä esimerkki sisältää a styles objekti, joka sisältää kaksi muuta objektia, joista toinen on .main luokka ja toinen tekstinsyöttöä varten, jotka sisältävät samanlaisia ​​tyylisääntöjä kuin ulkoisessa tyylitaulukossa. Näitä objekteja sovelletaan sitten style palautetussa merkinnässä olevien elementtien attribuutti.

Huomaa, että tyyleihin viitattaessa käytetään kaarevia sulkeita lainausmerkkien sijaan, joita tavallisesti käyttäisimme tavallisessa HTML:ssä.

Käytä CSS-moduuleja

CSS -moduulit… mitä ihmettä niille tapahtui, eikö niin? Niissä on paikallisesti laajennettujen muuttujien etu, ja niitä voidaan käyttää aivan Reactin rinnalla. Mutta mitä ne tarkalleen ottaen ovat?

Lainaus repon dokumentaatio:

CSS-moduulit kääntävät yksittäisiä CSS-tiedostoja sekä CSS:ksi että dataksi. CSS-tulostus on normaali, globaali CSS, joka voidaan ruiskuttaa suoraan selaimeen tai ketjuttaa yhteen ja kirjoittaa tiedostoon tuotantokäyttöä varten. Tietoja käytetään tiedostoissa käyttämiesi ihmisten luettavissa olevien nimien yhdistämiseen maailmanlaajuisesti turvalliseen CSS-tulosteen.

Yksinkertaisemmin sanottuna CSS-moduulit antavat meille mahdollisuuden käyttää samaa luokan nimeä useissa tiedostoissa ilman ristiriitoja, koska jokaiselle luokan nimelle annetaan ainutlaatuinen ohjelmallinen nimi. Tämä on erityisen hyödyllistä suuremmissa sovelluksissa. Jokainen luokan nimi on rajattu paikallisesti tiettyyn komponenttiin, johon se tuodaan.

CSS-moduulin tyylitaulukko on samanlainen kuin tavallinen tyylitaulukko, mutta sillä on eri laajennus (esim styles.module.css). Näin ne asetetaan:

  1. Luo tiedosto sovelluksella .module.css laajennuksena.
  2. Tuo moduuli React-sovellukseen (kuten näimme aiemmin)
  3. Lisää className elementtiin tai komponenttiin ja viitata tiettyyn tyyliin tuoduista tyyleistä.

Super yksinkertainen esimerkki:

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

Käytä tyyliteltyjä komponentteja

Oletko käyttänyt tyylitetyt komponentit? Se on melko suosittu ja antaa sinun rakentaa mukautettuja komponentteja käyttämällä todellista CSS:ää JavaScriptissäsi. Tyylitelty komponentti on pohjimmiltaan React-komponentti, jossa on - valmistaudu siihen - tyylejä. Joitakin ominaisuuksia ovat ainutlaatuiset luokkanimet, dynaaminen tyyli ja CSS:n parempi hallinta, koska jokaisella komponentilla on omat erilliset tyylinsä.

Asenna styled-components npm-paketti komentoriville:

npm install styled-components

Tuo seuraavaksi se React-sovellukseen:

import styled from 'styled-components'

Luo komponentti ja määritä sille tyylillinen ominaisuus. Huomaa, että mallin literaalit on merkitty backticksillä Wrapper esine:

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

Ylempi Wrapper komponentti hahmonnetaan div-muodossa, joka sisältää kyseiset tyylit.

Ehdollinen muotoilu

Yksi tyyliteltyjen komponenttien eduista on, että komponentit itsessään ovat toimivia, sillä CSS:n sisällä voidaan käyttää rekvisiitta. Tämä avaa oven ehdollisiin lausumiin ja muuttuviin tyyleihin perustuen tilaan tai rekvisiittiin.

Tässä on demo, joka näyttää sen:

Tässä manipuloimme divejä display ominaisuutta näytön tilassa. Tätä tilaa ohjataan painikkeella, joka vaihtaa div:n tilan, kun sitä napsautetaan. Tämä vuorostaan ​​vaihtaa kahden eri tilan tyylien välillä.

Inline if lausumia, käytämme a ? tavallisen sijasta if/else syntaksi. The else osa on puolipisteen jälkeen. Ja muista aina soittaa tai käyttää tilaa sen alustuksen jälkeen. Esimerkiksi tuossa viimeisessä demossa valtion pitäisi olla yläpuolella Wrapper komponenttien tyylejä.

Hyvää React-tyyliä!

Se on kääre, ihmiset! Tarkastelimme kourallista eri tapoja kirjoittaa tyylejä React-sovelluksessa. Eikä yksikään ole parempi kuin muut; käyttämäsi lähestymistapa riippuu tietysti tilanteesta. Toivottavasti nyt ymmärrät ne hyvin ja tiedät, että sinulla on joukko työkaluja React-muotoiluarsenaalissasi.

Aikaleima:

Lisää aiheesta CSS-temppuja