ВГРАДЕН СТИЛ В REACT

Въведение

В проекти за интерфейс, които рядко изискват приложение от една страница, вградените стилове на DOM елементи често се поставят в целевия елемент >' атрибут.

Но в React нещата са доста различни по отношение на вградения стил. Това ръководство се фокусира върху постигането на това чрез пример от реалния свят за създаване на компонент Карта на потребителския профил.

Компоненти за стилизиране в React

Може би вече сте наясно с обичайния начин за стилизиране на компоненти на React с помощта на атрибута име на клас във връзка с външен лист със стилове:

 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 обект с камилски свойства. Пример:

 function MyComponent(){ return Inline Styled Component }

Обърнете внимание, че стойността на запълване няма единица, защото 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