5 начина за стилизиране на React с помощта на CSS [2023]

Знаете ли, че над 97% от уебсайтовете използват CSS за стилизиране?

Каскадните стилови таблици или CSS позволяват на разработчиците да създават добре изглеждащи, сканируеми и представителни уеб страници.

CSS езикът определя как документите се представят на потребителя. Документът в този случай е файл, написан на език за маркиране като XML или HTML.

Съдържание

Какво е стилизиране в React?

Простотата на създаване, стартиране и поддържане на React приложение е основната причина зад неговата популярност. React е JavaScript библиотека, а не рамка, предлагаща повече от просто предварително написани функции и кодови фрагменти.

Наличието на компоненти за многократна употреба, неговата гъвкавост, стабилност на кода, скорост и производителност са някои от причините, поради които React е високо класиран сред JavaScript рамки и библиотеки.

Стилизирането в React е процес на правене на различни компоненти в React приложение визуално привлекателни с помощта на CSS. Заслужава обаче да се отбележи, че React използва JSX (JavaScript и XML) вместо HTML като свой език за маркиране. Една от основните разлики е, че HTML използва .class за етикетиране на класове, докато JSX използва .ClassName за обозначаване на същото.

Защо трябва да стилизирате React с помощта на CSS?

Направете приложението си отзивчиво. Модерните уеб приложения трябва да са достъпни както на малки, така и на големи екрани. CSS ви позволява да прилагате медийни заявки към вашето приложение React и да го направите отзивчиво към различни размери на екрана.
Ускорете процеса на развитие. Можете да използвате едно и също CSS правило в няколко компонента на вашето приложение React.
Направете приложението React поддържано. Правенето на промени във външния вид на конкретни компоненти/части от вашето приложение е лесно с помощта на CSS.
Подобрено потребителско изживяване. CSS позволява удобно форматиране. React с текст и бутони на логични места е лесен за навигиране и използване.

Има няколко подхода, които разработчиците могат да използват, за да стилизират своите React приложения. По-долу са някои от най-често срещаните;

Защо обичах Microsoft Bob, най-странното творение на Microsoft

Пишете вградени стилове

Вградените стилове са най-лесният подход за стилизиране на приложение на React, тъй като потребителите не трябва да създават външен лист със стилове. CSS стилът се прилага директно към кода на React.

Струва си да се отбележи, че вградените стилове имат висок приоритет пред другите стилове. По този начин, ако имате външен стилов лист с известно форматиране, той ще бъде заменен от вградения стил.

Това е демонстрация на вграден стил в приложение на React.

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Header />);

Показаният елемент ще показва h1 със светлосин фон.

Плюсове на вградения стил

бързо Това е най-простият подход, тъй като добавяте стил директно към етикета, който искате да стилизирате.
Има големи предпочитания. Вградените стилове заместват външните листове със стилове. По този начин можете да го използвате, за да се съсредоточите върху определена функционалност, без да променяте цялото приложение.
Страхотен за създаване на прототипи. Можете да използвате вградени стилове, за да тествате функционалността, преди да включите форматирането във външен лист със стилове.

Минуси на вградения стил

Може да бъде досадно. Оформянето на всеки таг директно отнема много време.
Ограничен. Не можете да използвате CSS функции като селектори и анимации с вградени стилове.
Много вградени стилове правят JSX кода нечетлив.

Импортиране на външни таблици със стилове

Можете да напишете CSS във външен файл и да го импортирате в приложението React. Този подход е сравним с импортирането на CSS файл в тага на HTML документ.

За да постигнете това, трябва да създадете CSS файл в директорията на вашето приложение, да го импортирате във вашия целеви компонент и да напишете стилови правила за вашето приложение.

За да демонстрирате как работят външните CSS таблици със стилове, можете да създадете CSS файл и да го наименувате App.css. След това можете да го експортирате по следния начин.

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Горният кодов фрагмент импортира външен лист със стилове към компонента App.js. Файлът App.css се намира в папката Components.

Плюсове на външни CSS стилови листове

Многократна употреба. Можете да използвате едно и също CSS правило/а в различни компоненти в приложение на React.
Прави кода по-представителен. Разбирането на кода е лесно, когато използвате външни таблици със стилове.
Дава достъп до разширени CSS функции. Можете да използвате псевдокласове и разширени селектори, когато използвате външни стилови листове.

Против външни CSS стилови листове

Изисква надеждна конвенция за именуване, за да се гарантира, че стиловете няма да отменят.

Как да получите Samsung Password Manager

Използвайте CSS модули

Приложенията на React могат да станат наистина големи. Имената на CSS анимациите и имената на класовете по подразбиране са с глобален обхват. Тази настройка може да бъде проблематична, когато работите с големи таблици със стилове, тъй като един стил може да замени друг.

CSS модулите решават това предизвикателство чрез локално обхват на анимацията и имената на класовете. Този подход гарантира, че имената на класовете са достъпни само във файла/компонента, където са необходими. Всяко име на клас получава уникално програмно име, избягвайки конфликти.

За да внедрите CSS модули, създайте файл с .module.css. Ако искате да наименувате своя лист със стилове като style, името на файла ще бъде style.module.css.

Импортирайте създадения файл във вашия React компонент и ще сте готови да започнете.

Вашият CSS файл може да изглежда по следния начин;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Можете да импортирате CSS модула във вашия App.js, както следва;

import { React } from "react";

import styles from "./styles.module.css";

function App() {

  return (

    <h1 className={styles.heading}>Hello pctechbg.net reader</h1>

  );

}

export default App;

Плюсове от използването на CSS модули

Интегрира се лесно със SCSS и CSS
Избягва конфликти на имена на класове

Минуси от използването на CSS модули

Позоваването на имена на класове с помощта на CSS модули може да бъде объркващо за начинаещи.

Използвайте стилизирани компоненти

Стилизираните компоненти позволяват на разработчиците да създават компоненти, използвайки CSS в JavaScript код. Стилизираният компонент действа като React компонент, който идва със стилове. Стилизираните компоненти предлагат динамичен стил и уникални имена на класове.

За да започнете да използвате стилизирани компоненти, можете да инсталирате пакета в основната си папка, като използвате тази команда;

npm install styled-components

Следващата стъпка е импортиране на стилизирани компоненти към вашето приложение React

Следното е кодов фрагмент на App.js, който използва стилизирани компоненти;

import { React } from "react";
import styled from "styled-components";

function App() {

  const Wrapper = styled.div`

    width: 80%;

    height: 120px;

    background-color: lightblue;

    display: block;

  `;

  return <Wrapper />;

}

export default App;

Изобразеното приложение ще има горните стилове, импортирани от Styled Components.

Предимства на стилизираните компоненти

Предсказуемо е. Стиловете при този стилизиращ подход са вложени в отделни компоненти.
Няма нужда да се фокусирате върху конвенциите за именуване на вашите класове. Просто напишете вашите стилове и пакетът ще се погрижи за останалото.
Можете да експортирате стилизирани компоненти като подпори. Стилизираните компоненти преобразуват нормален CSS в React компоненти. По този начин можете да използвате повторно този код, да разширите стилове чрез подпори и да експортирате.

Поправете грешка при мрежовата връзка 0x00028002

Против стилизирани компоненти

Трябва да инсталирате библиотека на трета страна, за да започнете.

Синтактично страхотни стилови таблици (SASS/SCSS)

SASS идва с по-мощни инструменти и функции, които липсват в нормалния CSS. Можете да пишете стилове в два различни стила, ръководени от тези разширения; .scss и .sass.

Синтаксисът за SASS е подобен на този на обикновения CSS. Въпреки това не се нуждаете от отварящи и затварящи скоби, когато пишете стилови правила в SASS.

Прост фрагмент от SASS ще се появи, както следва;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

За да започнете да използвате SASS във вашето приложение React, трябва първо да компилирате SASS в обикновен CSS. След като настроите приложението си чрез командата Create React App, можете да инсталирате node-sass, за да се погрижите за компилацията.

npm install node-sass

След това можете да създадете вашите файлове и да им дадете разширения .scss или .sass. След това можете да импортирате вашите файлове по нормалния начин. Например;

import "./Components/App.sass";

Плюсове на SASS/SCSS

Той идва с много динамични функции като миксини, влагане и разширяване.
Нямате много шаблони, за да пишете CSS код, когато използвате SASS/SCSS

Минуси на SASS/SCSS

Стиловете са глобални и по този начин може да срещнете първостепенни проблеми.

Кой е най-добрият стилистичен подход?

Тъй като обсъдихме пет подхода, искате да знаете кой е най-добрият. Трудно е да се посочи категоричният победител в тази дискусия. Тези съображения обаче ще ви помогнат да вземете информирано решение:

Показателите за ефективност
Независимо дали имате нужда от система за проектиране
Лесното оптимизиране на вашия код

Вграденият стил е подходящ, когато имате просто приложение с няколко реда код. Всички останали обаче; външни, SASS, стилизирани компоненти и CSS модули, са подходящи за големи приложения.

Какви са най-добрите практики за поддържане на CSS в голямо React приложение?

Избягвайте вграден стил. Писането на вградени CSS стилове за всеки таг в голямо приложение на React може да бъде уморително. Вместо това използвайте външен стилов лист, който отговаря на вашите нужди.
Линт кода си. Linters като Stylelint ще подчертае грешките в стила във вашия код, така че да можете да ги коригирате рано.
Правете редовни прегледи на кода. Писането на CSS изглежда забавно, но редовните прегледи на кода улесняват ранното идентифициране на грешки.
Автоматизирайте тестовете на вашите CSS файлове. Enzyme и Jest са страхотни инструменти, които можете да използвате за автоматизиране на тестовете на вашия CSS код.
Пазете кода си СУХ. когато работите с често използвани стилове като цветове и полета, използвайте полезни променливи и класове, както става с принципа Не се повтаряйте (DRY).
Използвайте конвенции за именуване като Модификатор на блокови елементи. Такъв подход улеснява писането на CSS класове, които са лесни за разбиране и повторно използване.

Заключение

По-горе са някои от начините, които можете да използвате за стилизиране на React. Изборът на стилизиращ подход ще зависи от вашите нужди, умения и вкус. Можете дори да комбинирате няколко подхода за стилизиране, като вградени и външни листове със стилове, във вашето приложение React.

Можете също така да разгледате някои от най-добрите CSS рамки и библиотеки за разработчици от предния край.