Reaguokite stiliaus komponentus: įterpti stiliai + 3 kiti CSS stiliaus metodai (su pavyzdžiais)

Nėra vieno teisingo būdo, kaip suformuoti „React“ komponentus. Viskas priklauso nuo to, kiek sudėtinga yra jūsų „front-end“ programa ir kuris būdas jums patogiausias.

Yra keturi skirtingi „React“ programos stiliaus būdai, ir šiame įraše sužinosite apie juos visus. Pradėkime nuo tiesioginio stiliaus.

Įterptasis stilius

Reakcijos komponentai susideda iš JSX elementų. Bet tai, kad nerašote įprastų HTML elementų, dar nereiškia, kad negalite naudoti senojo tiesioginio stiliaus metodo.

Vienintelis skirtumas nuo JSX yra tas, kad įterptieji stiliai turi būti rašomi kaip objektas, o ne eilutė.

Štai paprastas pavyzdys:

import React from "react"; export default function App() { return ( 

Hello World

); }

Pirmiau pateiktame stiliaus atribute pirmasis garbanotų skliaustų rinkinys JSX analizatoriui pasakys, kad skliausteliuose esantis turinys yra „JavaScript“ (o ne eilutė). Antrasis garbanotųjų skliaustų rinkinys inicijuos „JavaScript“ objektą.

Stiliaus nuosavybės pavadinimai, turintys daugiau nei vieną žodį, rašomi „camelCase“, o ne naudojami tradicinis brūkšninis stilius. Pvz., Įprasta text-alignypatybė turi būti parašyta taip textAlign, kaip JSX:

import React from "react"; export default function App() { return ( 

Hello World

); }

Kadangi stiliaus atributas yra objektas, taip pat galite atskirti stilių, rašydami jį kaip konstantą. Tokiu būdu, jei reikia, galite jį pakartotinai naudoti kituose elementuose:

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.

); }

Jei jums reikia išplėsti pastraipos stilių toliau, galite naudoti objektų sklaidos operatorių. Tai leis jums pridėti tiesioginius stilius prie jau deklaruoto stiliaus objekto:

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!

); }

Įterptieji stiliai yra pagrindinis JS stiliaus technikos CSS pavyzdys.

Vienas iš inline stiliaus požiūrio privalumų yra tas, kad turėsite paprastą, į komponentus orientuotą stiliaus techniką. Naudodami objektą stiliaus, galite išplėsti savo stilių, paskleisdami objektą. Tada, jei norite, galite pridėti daugiau stiliaus savybių.

Tačiau dideliame ir sudėtingame projekte, kuriame galite valdyti šimtus „React“ komponentų, tai gali būti ne pats geriausias pasirinkimas.

Negalite nurodyti pseudoklasių naudodami įterptinius stilius. Tai reiškia, kad :hover, :focus, :active, arba :visitedeiti pro langą, o ne komponento.

Be to, negalite nurodyti medijos užklausų dėl reaguojančio stiliaus. Apsvarstykime dar vieną „React“ programos stiliaus būdą.

CSS stiliaus lapai

Kai sukursite „React“ programą naudodami create-react-app, jūs automatiškai naudosite internetinę paketą, kad tvarkytumėte išteklių importavimą ir apdorojimą.

Puikus dalykas, susijęs su „webpack“, yra tas, kad, kadangi jis tvarko jūsų išteklius, taip pat galite naudoti „JavaScript“ importsintaksę .cssfailui importuoti į „JavaScript“ failą. Tada galite naudoti CSS klasės pavadinimą JSX elementuose, kuriuos norite stilizuoti, taip:

.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.

); }

Tokiu būdu CSS bus atskirtas nuo jūsų „JavaScript“ failų, ir jūs galite tiesiog parašyti CSS sintaksę taip pat, kaip įprasta.

Naudodami šį metodą, į „React“ programą galite įtraukti ir CSS sistemą, pvz., „Bootstrap“. Viskas, ko jums reikia, yra importuoti CSS failą į šakninį komponentą.

Šis metodas leis jums naudoti visas CSS funkcijas, įskaitant pseudoklases ir medijos užklausas. Tačiau stiliaus lapo trūkumas yra tas, kad jūsų stilius nebus lokalizuotas jūsų komponente.

Visi CSS selektoriai turi tą pačią pasaulinę taikymo sritį. Tai reiškia, kad vienas parinkiklis gali turėti nepageidaujamų šalutinių poveikių ir sugadinti kitus vaizdinius jūsų programos elementus.

Kaip ir įterptieji stiliai, naudojant stiliaus lenteles vis tiek iškyla CSS palaikymo ir atnaujinimo dideliame projekte problema.

CSS moduliai

CSS modulis yra įprastas CSS failas, kurio visi klasės ir animacijos pavadinimai pagal numatytuosius nustatymus yra lokaliai nustatyti.

Kiekvienas „React“ komponentas turės savo CSS failą, todėl jums reikia importuoti reikalingus CSS failus į savo komponentą.

Norėdami pranešti „React“, kad naudojate CSS modulius, pavadinkite savo CSS failą naudodamiesi [name].module.csssutartimi.

Štai pavyzdys:

.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!

); }

Kai kuriate programą, internetinė pakuotė automatiškai ieškos CSS failų, turinčių .module.csspavadinimą. „Webpack“ paims tuos klasių pavadinimus ir susieja juos su nauju sugeneruotu lokalizuotu pavadinimu.

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.