A CSS írásának különböző módjai a React PlatoBlockchain Data Intelligence alkalmazásban. Függőleges keresés. Ai.

A CSS írásának különböző módjai a Reactban

Időbélyeg: 22. június 2022. 10:24

Mindannyian ismerjük a szokásos módszert stíluslap összekapcsolása hoz <head> egy HTML-dokumentumról, igaz? Ez csak egy a CSS írási módok közül. De hogyan néz ki dolgokat stílusozni egy egyoldalas alkalmazásban (SPA), mondjuk egy React projektben?

Kiderült, hogy a React-alkalmazások stílusának kialakítására többféle módszer is létezik. Egyesek átfedésben vannak a hagyományos stílussal, mások nem annyira. De vegyük számba az összes lehetséges módot.

Külső stíluslapok importálása

Ahogy a neve is sugallja, a React képes CSS-fájlok importálására. A folyamat hasonló ahhoz, ahogyan a CSS-fájlt összekapcsoljuk a HTML-ben <head>:

  1. Hozzon létre egy új CSS-fájlt a projektkönyvtárban.
  2. Írj CSS-t.
  3. Importálja a React fájlba.

Mint ez:

import "./style.css";

Ez általában a fájl tetején található, ahol más importálás történik:

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

Ebben a példában egy CSS-fájlt importálunk egy App.js tól /Components/css mappát.

Írjon beépített stílusokat

Lehet, hogy megszoktad, hogy a beépített stílus nem túl jó a karbantarthatóság szempontjából, de biztosan vannak helyzetek (itt az egyik!) ahol van értelme. A karbantarthatóság pedig kevésbé probléma a Reactban, mivel a CSS gyakran amúgy is ugyanabban a fájlban található.

Ez egy szuper egyszerű példa a React beépített stílusára:

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

Egy jobb megközelítés azonban az objektumok használata:

  1. Először hozzon létre egy objektumot, amely különböző elemek stílusait tartalmazza.
  2. Ezután adja hozzá egy elemhez a segítségével style attribútumot, majd válassza ki a stílushoz kívánt tulajdonságot.

Nézzük ezt összefüggésben:

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;

Ez a példa tartalmazza a styles objektum, amely két további objektumot tartalmaz, az egyiket a .main osztály, a másik pedig egy szövegbevitelhez, amelyek hasonló stílusszabályokat tartalmaznak, mint amilyeneket egy külső stíluslapon várnánk. Ezeket az objektumokat ezután alkalmazzák a style a visszaadott jelölésben található elemek attribútuma.

Vegye figyelembe, hogy a stílusokra való hivatkozáskor göndör zárójeleket használunk az egyszerű HTML-ben általában használt idézőjelek helyett.

Használjon CSS-modulokat

CSS modulok… mi a fene történt velük, igaz? Előnyük a helyi hatókörű változók, és közvetlenül a React mellett használhatók. De mik is ezek pontosan?

Idézve a repo dokumentációja:

A CSS Modules úgy működik, hogy az egyes CSS-fájlokat CSS-be és adatokba is fordítja. A CSS kimenet normál, globális CSS, amely közvetlenül a böngészőbe fecskendezhető, vagy összefűzhető és fájlba írható éles használatra. Az adatok a fájlokban használt, ember által olvasható nevek leképezésére szolgálnak a globálisan biztonságos kimeneti CSS-hez.

Egyszerűbben fogalmazva, a CSS-modulok lehetővé teszik, hogy ugyanazt az osztálynevet több fájlban is használjuk ütközések nélkül, mivel minden osztálynév egyedi programozott nevet kap. Ez különösen hasznos nagyobb alkalmazásoknál. Minden osztálynév hatóköre helyileg az adott összetevőhöz tartozik, amelybe importálják.

A CSS-modul stíluslapja hasonló a hagyományos stíluslapokhoz, csak más kiterjesztéssel (pl styles.module.css). Így vannak beállítva:

  1. Hozzon létre egy fájlt a .module.css mint a kiterjesztés.
  2. Importálja a modult a React alkalmazásba (ahogy korábban láttuk)
  3. Hozzáadása className egy elemre vagy összetevőre, és hivatkozzon az adott stílusra az importált stílusokból.

Szuper egyszerű példa:

/* 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;

Használjon stílusos összetevőket

Használta stílusos komponensek? Meglehetősen népszerű, és lehetővé teszi egyedi komponensek létrehozását a JavaScriptben lévő tényleges CSS használatával. A stílusos komponens alapvetően egy React komponens stílusokkal – készülj fel rá –. Egyes funkciók közé tartozik az egyedi osztálynevek, a dinamikus stílus és a CSS jobb kezelése, mivel minden összetevőnek megvan a maga külön stílusa.

Telepítse a styled-components npm csomagot a parancssorban:

npm install styled-components

Ezután importálja a React alkalmazásba:

import styled from 'styled-components'

Hozzon létre egy összetevőt, és rendeljen hozzá egy stílusos tulajdonságot. Vegye figyelembe a sablon literálok használatát, amelyeket backtick-ekkel jelölnek a Wrapper tárgy:

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;

A fenti Wrapper komponens divként jelenik meg, amely tartalmazza ezeket a stílusokat.

Feltételes stílus

A stílusos komponensek egyik előnye, hogy maguk a komponensek funkcionálisak, mivel a CSS-en belül használható kellékeket. Ez megnyitja az ajtót a feltételes állítások és az állapot vagy kellék alapján változó stílusok előtt.

Itt egy demó, amely ezt mutatja be:

Itt a div-eket manipuláljuk display tulajdonság a kijelző állapotában. Ezt az állapotot egy gomb szabályozza, amely kattintáskor váltja a div állapotát. Ez viszont két különböző állapot stílusa között vált.

Inline if kijelentéseket használunk a ? a megszokott helyett if/else szintaxis. A else rész a pontosvessző után van. És ne feledje, hogy mindig hívja vagy használja az állapotot az inicializálás után. Az utolsó demóban például az államnak a felett kell lennie Wrapper komponens stílusai.

Boldog React stílust!

Ez egy pakolás, emberek! Megnéztünk néhány különböző módot a stílusok React alkalmazásban való írására. És nem mintha az egyik jobb lenne a többinél; az alkalmazott megközelítés természetesen a helyzettől függ. Remélhetőleg most már jól megérti őket, és tudja, hogy egy csomó eszköz van a React stílusarzenáljában.

Időbélyeg:

Még több CSS trükkök