ВБУДОВАНИЙ СТИЛЬ У REACT

вступ

У інтерфейсних проектах, які рідко потребують односторінкової програми, вбудовані стилі елементів DOM часто розміщуються в цільовому елементі > атрибут.

Але в React все зовсім інакше щодо вбудованого стилю. У цьому посібнику зосереджено на досягненні цього за допомогою реального прикладу створення компонента «Картка профілю користувача».

Компоненти стилю в React

Можливо, ви вже знаєте про звичайний спосіб стилізації компонентів React за допомогою атрибута classname у поєднанні із зовнішньою таблицею стилів:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx

 paragraph-text{ font-weight: bold; color: beige; }

CSS

Вбудовані стилі

Отримання того самого результату за допомогою вбудованих стилів працює зовсім інакше. Щоб використовувати вбудовані стилі в React, використовуйте атрибут style, який приймає об’єкт JavaScript із властивостями Camel. приклад:

 function MyComponent(){ return Inline Styled Component }

Зверніть увагу, що значення padding не має одиниці вимірювання, оскільки React додає a 'px ' суфікс до деяких числових властивостей вбудованого стилю. У випадках, коли вам потрібно використовувати інші одиниці, такі як «em» або «rem», явно вкажіть одиницю зі значенням у вигляді рядка. Застосування цього до властивості padding має бути padding: '1.5em' .

Крім того, ці стилі не мають автоматичного префікса постачальника, тому вам доведеться додавати префікси постачальника вручну.

Покращення читабельності

Читабельність MyComponent різко падає, якщо стилів стає забагато і все стає незграбним. Як показано нижче, оскільки стилі — це лише об’єкти, їх можна видалити з компонента.

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

Створення компонента картки

Давайте створимо компонент картки користувача.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

Практичне правило

Офіційна документація React сперечається з використанням вбудованого стилю як основного засобу стилізації проектів і рекомендує використовувати замість нього атрибут className.

Примітка. Деякі приклади в документації використовують стиль для зручності, але зазвичай не рекомендується використовувати атрибут style як основний засіб стилізації елементів.

В більшості випадків, назва класу s має посилатися на класи, визначені у зовнішній таблиці стилів CSS. Стилі часто використовуються в програмах React для додавання динамічно обчислених стилів під час візуалізації.

TechCodeview