ИНЛИНЕ СТИЛ У РЕАЦТ-У

Увод

У фронтенд пројектима који ретко захтевају апликацију на једној страници, уграђени стилови ДОМ елемената се често постављају у циљни елемент >' атрибут.

Али у Реацт-у ствари су сасвим другачије у вези са стилизовањем на линији. Овај водич се фокусира на постизање овога користећи пример из стварног света креирања компоненте картице корисничког профила.

Компоненте за стилизовање у Реацт-у

Можда сте већ свесни редовног начина стилизовања Реацт компоненти користећи атрибут цласснаме у комбинацији са спољним стилом:

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

јск

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

ЦСС

Инлине Стилес

Добијање истог резултата са уграђеним стиловима функционише сасвим другачије. Да бисте користили уграђене стилове у Реацт-у, користите атрибут стиле, који прихвата ЈаваСцрипт објекат са својствима камила. Пример:

 function MyComponent(){ return Inline Styled Component }

Имајте на уму да вредност допуне нема јединицу јер Реацт додаје а 'пк ' суфикс за нека нумеричка својства инлине стила. У случајевима када треба да користите друге јединице, као што су 'ем' или 'рем', експлицитно наведите јединицу са вредношћу као стринг. Примена овога на својство паддинг требало би да буде паддинг: '1.5ем' .

Такође, ови стилови немају аутоматски префикс добављача, тако да морате ручно да додате префиксе добављача.

Побољшајте читљивост

Читљивост МиЦомпонент драматично опада ако стилова постане превише и све постане незграпно. Као што је приказано у наставку, пошто су стилови само објекти, они се могу уклонити из компоненте.

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

јск

Прављење компоненте картице

Хајде да направимо компоненту корисничке картице.

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

Правило

Званична Реацт документација лаје на коришћење уграђеног стила као примарног средства за стилизовање пројеката и препоручује коришћење атрибута цлассНаме уместо тога.

Напомена Неки примери у документацији користе стил ради погодности, али се генерално не препоручује коришћење атрибута стила као примарног средства за стилизовање елемената.

У већини случајева, Назив класе с треба да се односи на класе дефинисане у екстерном ЦСС стилу. Стилови се често користе у Реацт апликацијама за додавање динамички израчунатих стилова у време рендеровања.

TechCodeview