A CSS-in-JS könyvtárak, akárcsak a stílusos komponensek, az elmúlt években népszerűbbé váltak. A CSS-t az összetevők szintjéig beágyazzák, és lehetővé teszik a JavaScript használatát az újrafelhasználható stílusok meghatározásához.

A stílusos összetevők használatával fenntarthatja azt az összetevő-vezérelt architektúrát, amelyet a React már megerősít. De a könyvtárnak vannak árnyoldalai is.

Hogyan működnek a stílusos összetevők

Az stílusos komponensek A CSS-in-JS könyvtár lehetővé teszi, hogy CSS-t írjon az összetevőfájlokba. A szintaxisa megegyezik a CSS-éval, így elég könnyű átvenni. Ez egy tökéletes középút a JavaScript-fejlesztők számára, akik hajlamosak távol maradni a tiszta CSS-től.

Ha látni szeretné, hogyan működik, vegye figyelembe a következő Title összetevőt, amely egy h1 elemet jelenít meg.

const Cím = styled.h1`
betűméret: 1.5em;
 szöveg igazítása: középre;
 piros szín;
`;

Ezt a komponenst ugyanúgy használhatja, mint bármely más React komponenst.

const Kezdőlap = () => {
Visszatérés (
<Cím>Egy stílusos komponens címsor</Title>
	)
}
instagram viewer

Nagyon erős is, mert megkönnyíti a kellékekkel és állapotokkal való munkát.

Például ennek a komponensnek a színe és háttere a kellékektől függ.

import stílusú tól től „stílusos komponensek”;
const Gomb = stílusos.gomb`
párnázás: 0.8rem 1.6rem;
 háttérszín: ${(kellékek) => (props.primary? "lila": "fehér")};
 határ: 1px tömör #00000;
 szín: ${(kellékek) => (props.primary? "fehér": "lila")};
`;
exportalapértelmezettfunkcióitthon() {
 Visszatérés <Gomb elsődleges>Elsődleges</Button>
}

A stílusos összetevők esetén nem kell manuálisan átadnia a kellékeket a CSS-nek. Automatikusan elérhető, leegyszerűsítve az írási stílusokat, amelyek az összetevő adataitól függenek.

A stílusos komponensek használatának előnyei

Íme néhány előnye a stílusos összetevők könyvtárának.

Megoldja a CSS-specifikus problémákat

A stílusos komponensek kiküszöbölik a specifikussági problémákat, mivel a CSS-t egy komponensbe zárják. Ez azt jelenti, hogy nem kell aggódnia amiatt, hogy az osztálynevek ütköznek, vagy a kezelőfelülete zűrzavarba fordul az osztálynevek ütközése miatt.

Lehetővé teszi CSS belső komponensek írását

Amint az a gombösszetevő példájából látható, a styled-components lehetővé teszi a CSS és a JS kombinálását ugyanabban a fájlban. Így nem kell külön CSS-fájlt létrehoznia, és nem kell folyamatosan fájlról fájlra váltania.

Ez óriási előny a felhasználói felület készletek létrehozásakor, mivel az összetevők összes funkcióját egy fájlban tárolja.

Ettől eltekintve CSS írása a komponenseken belül. Ez megkönnyíti a kellékek és állapotok stílusokkal való megosztását.

Típusellenőrzést tesz lehetővé

A stílusos összetevőkkel gépelve ellenőrizheti a stílusaiban használt kellékeket és értékeket. Például átírhatja a fenti gombkomponenst TypeScript segítségével.

felületkellékek{
 elsődleges: logikai érték
}
const Button = stílusos.gomb<kellékek>`
párnázás: 0.8rem 1.6rem;
 háttérszín: ${(kellékek) => (props.primary? "lila": "fehér")};
 határ: 1px tömör #00000;
 szín: ${(kellékek) => (props.primary? "fehér": "lila")};
`;

TypeScript használata az összetevőben azt jelenti, hogy kódolás közben ellenőrizni kell a típushibákat, és csökkenteni kell a hibakeresési időt.

Támogatja a Theming Out of the Box

Sötét téma hozzáadása vagy bármely más téma az alkalmazáshoz nehéz és időigényes lehet. A Styled összetevők azonban leegyszerűsítik a folyamatot. Témákat adhat hozzá az alkalmazáshoz, ha exportálja a burkoló komponens.

const Gomb = styled.main`
 háttérszín: ${kellék => props.theme.light.background};
 szín: ${kellék => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Gomb>
 Világító gomb
</Button>
</ThemeProvider>

A ThemeProvider összetevő átadja a témákat az összes általa burkolt stílusos összetevőnek. Ezek az összetevők ezután használhatják a témaértékeket a stílusukban. Ebben a példában a gomb a téma értékeit használja a háttér és a betűtípus színéhez.

A stílusos komponensek használatának hátrányai

A stílusos komponensek könyvtárának számos előnye van, de vannak hátrányai is.

Nem Framework-független

A CSS írása JS-ben azt jelenti, hogy a kettő szétválasztása a jövőben nehéz lesz, ami borzasztó a karbantarthatóság szempontjából. Például, ha valaha úgy dönt, hogy lecseréli JavaScript keretrendszer, akkor át kell írnia a kódbázis nagy részét.

Ez időigényes és költséges. Használata CSS modulok vagy egy keretrendszertől független könyvtár, mint az érzelem, jövőbiztosabb.

Nehéz lehet olvasni

A stílusos és a React komponensek megkülönböztetése nehéz lehet, különösen az atomi tervezési rendszeren kívül. Tekintsük ezt a példát:

<Fő>
<Nav>
<Listaelem>
<LinkText>Fogadj örökbe egy kisállatot</LinkText>
</ListItem>
<Listaelem>
<LinkText>Adományoz</LinkText>
</ListItem>
</Nav>
<Fejléc>Fogadj örökbe, ne't bolt!</Header>
<SecondaryBtn btnText="Adományoz" />
</Main>

Az egyetlen módja annak, hogy megtudjuk, melyik összetevő tartalmaz üzleti logikát, ha ellenőrizzük, hogy vannak-e kellékei. Továbbá, annak ellenére, hogy ebben a példában az összetevők nevei leíró jellegűek, még mindig nehéz megjeleníteni őket.

Például a Fejléc összetevő lehet egy címsor, de ha nem ellenőrzi a stílusokat, előfordulhat, hogy soha nem fogja tudni, hogy h1, h2 vagy h3.

Egyes fejlesztők úgy oldják meg ezt a problémát, hogy csak a stílusos összetevőt használják burkolóként, és a szemantikus HTML-címkéket használják a benne lévő elemekhez.

Ebben a példában a fejléc komponens h1 címkét használhat.

<h1>Fogadj örökbe, ne't bolt!</h1>

Ezt tovább viheti, ha egy másik fájlban (pl. styled.js) határozza meg a stílusos összetevőket, amelyeket később importálhat egy React komponensbe.

import * mint Stílusos tól től './styled'
// styled.components használata
<stílusú. Fő>
// kód
</styled.Main>

Ezzel világos képet kap arról, hogy mely összetevők vannak stílusosan és melyek a React összetevők.

A stílusos komponensek összeállítása futásidőben történik

A stílusos összetevőket használó alkalmazások esetében a böngésző letölti a CSS-t, és JavaScript segítségével elemzi, mielőtt beilleszti őket az oldalba. Ez teljesítményproblémákat okoz, mivel a felhasználónak sok JavaScriptet kell letöltenie a kezdeti betöltéskor.

A statikus CSS sokkal gyorsabb. Nem kell feldolgozni, mielőtt a böngésző az oldalak stílusához használja. A stílusos komponensek könyvtára azonban minden kiadással javul. Ha megengedheti magának némi csökkentett teljesítményt, használja azt.

Mikor kell stílusos komponenseket használni

Egyes fejlesztők szívesen írnak CSS-t JS-fájlokba, míg mások inkább külön CSS-fájlokat szeretnének. A CSS megírásának módja végső soron magától a projekttől és attól, hogy Ön vagy csapata mit szeret. A stílusos összetevők jó választás UI-könyvtárak létrehozásához, mivel minden egy fájlban található, és könnyen exportálható és újrafelhasználható.

Ha inkább tiszta CSS-t szeretne írni, használjon CSS-modulokat. Különálló CSS-fájlokkal rendelkezhet, és alapértelmezés szerint helyileg terjed ki a stílusokra. Függetlenül attól, hogy milyen döntést hoz, elengedhetetlen a szilárd CSS-ismeret.