# Работа с CSS стилями в атрибуте style в React

В предыдущих уроках в атрибут `style` мы передавали переменную, содержащую объект с CSS стилями. Можно не использовать промежуточную переменную, а расписать объект прямо в атрибуте - в этом случае нам нужны две пары фигурных скобок - первая от JSX вставки, а вторая - от объекта.

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

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

К примеру, пропишем напрямую CSS свойства для первого абзаца нашего React компонента `App`:

`<p style = {{ color: 'orangered', fontWeight: 'bold' }}> text </p>`

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

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

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

Возьмите React компонент, который вы делали в задаче к прошлому уроку. Добавьте стили каждому тегу прямо в атрибуте `style`, как показано в этом уроке.

← →
↑