104 lines
4.2 KiB
Markdown
104 lines
4.2 KiB
Markdown
---
|
||
id: 5a24c314108439a4d4036181
|
||
title: Представляємо вбудовані стилі
|
||
challengeType: 6
|
||
forumTopicId: 301395
|
||
dashedName: introducing-inline-styles
|
||
---
|
||
|
||
# --description--
|
||
|
||
Наявні інші складні концепції, що додають потужних можливостей для вашого коду React. Проте вас може зацікавити, більш проста задача, як стилізувати ті JSX елементи, які ви створюєте в React. Ви, можливо, знаєте, що це не буде в точності теж саме, що і робота з HTML, тому що [ це спосіб, за допомогою якого ви застосовуєте класи до JSX елементів](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||
|
||
Якщо ви імпортували стилі із таблиці стилів, то не суттєво відрізняється. Ви застосовуєте класи для вашого JSX елементу, користуючись `className` атрибута, також використовуєте стилі класу до вашої таблиці стилів. Інший варіант – це застосувати вбудовані стилі, які дуже поширені в розробці ReactJS.
|
||
|
||
Ви застосовуєте вбудовані стилі до елементів JSX подібно до того, як це робиться в HTML, але з деякими відмінностями в JSX. Ось приклад вбудованого стилю в HTML:
|
||
|
||
```jsx
|
||
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
|
||
```
|
||
|
||
Елементи JSX використовують атрибут `style`, але через шлях передачі JSX ви не можете встановити значення `string`. Замість цього зробіть його таким самим, як JavaScript `object`. Наприклад:
|
||
|
||
```jsx
|
||
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
|
||
```
|
||
|
||
Зверніть увагу, як ми зібрали значення `fontSize` у шрифті? Це тому, що React не буде приймати ключі кеба-регістру в об'єкті стилю. React може застосувати ім'я з правильними властивостями для нас у HTML.
|
||
|
||
# --instructions--
|
||
|
||
Додайте атрибут `style` до `div` в редактор коду, щоб надати тексту червоного кольору а шрифту розміру `72px`.
|
||
|
||
Зверніть увагу, ви можете за необхідністю встановити розмір шрифту як номер, пропускаючи одиниці виміру `px`, або записати це як `72px`.
|
||
# --hints--
|
||
|
||
Компонент повинен відображати елемент `div`.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(Colorful));
|
||
return mockedComponent.children().type() === 'div';
|
||
})()
|
||
);
|
||
```
|
||
|
||
Елемент `div` повинен мати `red` колір.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(Colorful));
|
||
return mockedComponent.children().props().style.color === 'red';
|
||
})()
|
||
);
|
||
```
|
||
|
||
Елемент `div` повинен мати розмір шрифту `72px`.
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(Colorful));
|
||
return (
|
||
mockedComponent.children().props().style.fontSize === 72 ||
|
||
mockedComponent.children().props().style.fontSize === '72' ||
|
||
mockedComponent.children().props().style.fontSize === '72px'
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --after-user-code--
|
||
|
||
```jsx
|
||
ReactDOM.render(<Colorful />, document.getElementById('root'))
|
||
```
|
||
|
||
## --seed-contents--
|
||
|
||
```jsx
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div>Big Red</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```jsx
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{color: "red", fontSize: 72}}>Big Red</div>
|
||
);
|
||
}
|
||
};
|
||
```
|