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