Работа с 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, как показано в этом уроке.