# Вставка данных в атрибут style из объекта в React

CSS стили элементам можно также добавлять и с помощью атрибута `style`. В этом и нескольких последующих уроках мы рассмотрим способы инлайновой стилизации.

Теперь мы не будем подключать файл `styles.css`, а передадим соответствующие значения в атрибут `style` в виде объекта со стилями для каждого тега, которые мы будем писать прямо в файле компонента.

Итак, возьмем наш компонент без CSS стилей, который мы делали на прошлом уроке:

`function App() { return ( <div> <p>text</p> <p>text</p> <p>text</p> </div> ); }`

Давайте в файле `App.js` перед командой `return` создадим объект с CSS стилями для дива в переменной `class1`. Помните, что названия свойств здесь пишутся в camelCase нотации, а значения свойств нужно взять в кавычки:

`const class1 = { width: '200px', border: '2px solid brown', padding: '10px', textAlign: 'center' };`

Теперь добавим объект `class2` со стилями для первого абзаца:

`const class2 = { color: 'orangered', fontWeight: 'bold' }`

Объект `class3` со стилями для второго абзаца:

`const class3 = { fontStyle: 'italic', color: 'brown', }`

И, наконец `class4` для последнего:

`const class4 = { backgroundColor: 'orange', fontWeight: 'bold', color: 'white', }`

Теперь, чтобы применить в компоненте CSS классы, воспользуемся атрибутом `style`. Для первого абзаца у нас была переменная `class2`, передадим ее в качестве значения:

`<p style={class2}>text</p>`

Подобным образом добавим стили из объектов для остальных тегов.

В результате, код компонента будет выглядеть следующим образом:

`function App() { const class1 = { width: '200px', border: '2px solid brown', padding: '10px', textAlign: 'center', }; const class2 = { color: 'orangered', fontWeight: 'bold', }; const class3 = { fontStyle: 'italic', color: 'brown', }; const class4 = { backgroundColor: 'orange', fontWeight: 'bold', color: 'white', }; return ( <div style={class1}> <p style={class2}>text</p> <p style={class3}>text</p> <p style={class4}>text</p> </div> ); }`

Возьмите React компонент, который вы делали в задаче к прошлому уроку, создайте объекты с CSS стилями к вашим тегам, проставьте их в соответствующих атрибутах `style`.

← →
↑