вступ
У інтерфейсних проектах, які рідко потребують односторінкової програми, вбудовані стилі елементів DOM часто розміщуються в цільовому елементі > атрибут.
Але в React все зовсім інакше щодо вбудованого стилю. У цьому посібнику зосереджено на досягненні цього за допомогою реального прикладу створення компонента «Картка профілю користувача».
Компоненти стилю в React
Можливо, ви вже знаєте про звичайний спосіб стилізації компонентів React за допомогою атрибута classname у поєднанні із зовнішньою таблицею стилів:
import React from 'react' import './style.css' 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: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component }
jsx
Створення компонента картки
Давайте створимо компонент картки користувача.
const cardStyles = { container: { display: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; 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 для додавання динамічно обчислених стилів під час візуалізації.