# Вставка данных в атрибут style из отдельного файла в React

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

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

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

Давайте создадим в папке `src` отдельный файл `styles.js`, в котором пропишем наши объекты со стилями:

`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', };`

Не забудем внизу файла `styles.js` экспортировать наши объекты одним объектом `styles`:

`export const styles = { class1: class1, class2: class2, class3: class3, class4: class4 };`

Теперь импортируем объект `styles` в наш компонент:

`import { styles } from "./styles";`

Теперь мы можем применять нужный нам объект с CSS стилями из общего объекта `styles` к нашим тегам. Применим к первому абзацу стили из объекта `class2`:

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

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

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

`function App() { return ( <div style={styles.class1}> <p style={styles.class2}>text</p> <p style={styles.class3}>text</p> <p style={styles.class4}>text</p> </div> ); }`

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

← →
↑