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

В прошлом уроке мы писали объект прямо в атрибуте `style`. Мы также можем использовать вставку данных в этот объект из переменных.

Давайте возьмем наш React компонент без CSS стилей:

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

Сейчас мы будем создавать переменные и присваивать им значения CSS свойств. Начнем по-порядку со стилей для дива.

В файле компонента перед командой `return` создадим переменную `wd1` и присвоим ей значение `'200px'`:

`const wd1 = '200px';`

Подобным образом создадим переменные для всех значений свойств нашего дива:

`const wd1 = '200px'; const br1 = '2px solid brown'; const pd1 = '10px'; const ta1 = 'center';`

Теперь добавим переменные для первого абзаца:

`const co1 = 'orangered'; const fw1 = 'bold';`

Для второго абзаца:

`const fs1 = 'italic'; const co2 = 'brown';`

И, наконец, для последнего. Здесь понадобится только две, а не три переменные. Не имеет смысла повторяться, ведь значение `bold` у нас уже есть для первого абзаца:

`const bco1 = 'orange'; const co3 = 'white';`

А сейчас мы подставим переменные со значениями стилей. Давайте, сделаем это для первого абзаца. Вставим переменные `co1` и `fw1` вместо значений в объекте:

`<p style = {{ color: co1, fontWeight: fw1 }}> text </p>`

Подобным образом поступим с остальными тегами.

В результате наш код компонента будет выглядеть так:

`function App() { //для div: const wd1 = '200px'; const br1 = '2px solid brown'; const pd1 = '10px'; const ta1 = 'center'; //для первого p: const co1 = 'orangered'; const fw1 = 'bold'; //для второго p: const fs1 = 'italic'; const co2 = 'brown'; //для третьего p: const bco1 = 'orange'; const co3 = 'white'; return ( <div style = {{ width: wd1, border: br1, padding: pd1, textAlign: ta1 }}> <p style = {{ color: co1, fontWeight: fw1 }}> text </p> <p style = {{ fontStyle: fs1, color: co2 }}> text </p> <p style = {{ backgroundColor: bco1, fontWeight: fw1, color: co3 }}> text </p> </div> ); }`

Модифицируйте код решения задачи к прошлому уроку так, чтобы значения CSS свойств хранились в переменных.

← →
↑