Вставка данных в атрибут 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 компоненту.