React stílusú komponensek: Beépített stílusok + 3 egyéb CSS stílusmódszer (példákkal)

Nincs egy helyes módszer a React-összetevők stílusának megtervezésére. Minden attól függ, mennyire összetett a kezelőfelülete, és melyik megközelítés a legkényelmesebb.

A React alkalmazás stílusának négy különböző módja van, és ebben a bejegyzésben megismerheti mindet. Kezdjük a beillesztéssel.

Inline stílus

A React komponensek JSX elemekből állnak. De csak azért, mert nem szokványos HTML elemeket ír, még nem jelenti azt, hogy nem használhatja a régi, inline stílusú módszert.

Az egyetlen különbség a JSX-sel szemben az, hogy az inline stílusokat objektumként kell megírni a karakterlánc helyett.

Itt van egy egyszerű példa:

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

Hello World

); }

A fenti stílusattribútumban a göndör zárójelek első csoportja megmondja a JSX elemzőjének, hogy a zárójelek közötti tartalom JavaScript (és nem karakterlánc). A második göndör zárójel inicializálja a JavaScript objektumot.

A több szóból álló stílusnév-neveket a hagyományos elválasztott stílus használata helyett a camelCase írja. Például a szokásos text-aligntulajdonságot úgy kell megírni, mint textAligna JSX-ben:

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

Hello World

); }

Mivel a stílusattribútum objektum, a stílust állandóként írva is elválaszthatja egymástól. Így szükség szerint újból felhasználhatja más elemeken:

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.

); }

Ha tovább kell bővítenie a bekezdésstílusát a sorban, használhatja az objektumterjesztés operátort. Ez lehetővé teszi a belső stílusok hozzáadását a már deklarált stílusobjektumhoz:

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!

); }

A belső stílusok a CSS legalapvetőbb példái a JS stílustechnikában.

Az inline stílusú megközelítés egyik előnye, hogy egyszerű, komponensekre összpontosító stílustechnikával rendelkezik. Ha egy objektumot használ a stílushoz, kiterjesztheti stílusát az objektum terjesztésével. Ezután további stílus tulajdonságokat adhat hozzá, ha akarja.

De egy nagy és összetett projektben, ahol több száz React összetevőt kell kezelnie, ez nem biztos, hogy a legjobb választás az Ön számára.

Inline stílusok használatával nem adhatók meg ál-osztályok. Ez azt jelenti :hover, :focus, :activevagy :visitedmenjen ki az ablakon, nem pedig az alkatrész.

Ezenkívül nem adhat meg média lekérdezéseket az adaptív stílushoz. Vizsgáljuk meg a React alkalmazás stílusának egy másik módját.

CSS stíluslapok

Ha a React alkalmazást használja create-react-app, automatikusan a webpack használatával kezeli az eszközök importálását és feldolgozását.

A webpack nagyszerű tulajdonsága, hogy mivel kezeli az eszközeit, a JavaScript importszintaxisával is importálhat egy .cssfájlt a JavaScript fájljába. Ezután használhatja a CSS osztály nevét a stílusos JSX elemekben, így:

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

); }

Így a CSS elválik a JavaScript-fájloktól, és csak a szokásos módon írhat CSS-szintaxist.

Akár egy CSS keretrendszert, például a Bootstrap-et is felveheti a React alkalmazásába ezzel a megközelítéssel. Csak annyit kell tennie, hogy importálja a CSS fájlt a gyökérösszetevőbe.

Ez a módszer lehetővé teszi az összes CSS szolgáltatás használatát, beleértve az ál-osztályokat és a média lekérdezéseket. De a stíluslap használatának hátránya, hogy a stílusa nem lokalizálódik az összetevőhöz.

Az összes CSS-választó globális hatóköre azonos. Ez azt jelenti, hogy az egyik választó nem kívánt mellékhatásokkal járhat, és megtörheti alkalmazásának egyéb vizuális elemeit.

Csakúgy, mint az inline stílusok, a stíluslapok használata továbbra is a CSS fenntartásának és frissítésének problémáját okozza egy nagy projektben.

CSS modulok

A CSS modul egy normál CSS fájl, amelynek összes osztály- és animációs neve alapértelmezés szerint lokálisan van körözve.

Minden React összetevőnek saját CSS fájlja lesz, és importálnia kell a szükséges CSS fájlokat az összetevőjébe.

Annak érdekében, hogy a React tudassa, hogy CSS modulokat használ, nevezze el a CSS fájlját a [name].module.csskonvenció használatával.

Íme egy példa:

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

); }

Amikor elkészíti az alkalmazást, a webpack automatikusan megkeresi a .module.cssnevet viselő CSS-fájlokat . A Webpack felveszi ezeket az osztályneveket, és egy új, generált, lokalizált névhez rendezi őket.

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.