57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
---
|
||
title: Introducing Inline Styles
|
||
localeTitle: Представление встроенных стилей
|
||
---
|
||
## Представление встроенных стилей
|
||
|
||
## Решение
|
||
|
||
Это может быть немного сложно, потому что JSX очень похож на HTML, но **не тот же** .
|
||
|
||
Давайте проведем шаги, чтобы вы поняли разницу. Сначала установите тэг стиля в **объект JavaScript** .
|
||
|
||
```react.js
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{}}>
|
||
Big Red
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Теперь у вас есть тег стиля, установленный на пустой объект. Обратите внимание, что есть два набора фигурных скобок. Это важное различие между JSX и HTML.
|
||
|
||
Во-вторых, давайте установим красный цвет.
|
||
|
||
```react.js
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{ color: 'red' }}>
|
||
Big Red
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Наконец, давайте установим размер шрифта в 72px.
|
||
|
||
### Спойлер
|
||
|
||
```react.js
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{ color: 'red', fontSize: '72'}}>
|
||
Big Red
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Обратите внимание, что атрибут JSX - это **camelCase** . Это еще одно важное отличие, чтобы помнить о JSX. Кроме того, вы, вероятно, заметили, что нет единицы. В JSX при настройке атрибута fontSize **блок является необязательным** и автоматически устанавливается в px, если он не задан вручную. |