0a1eeea424
* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
---
|
||
title: Introducing Inline Styles
|
||
localeTitle: Представление встроенных стилей
|
||
---
|
||
## Представление встроенных стилей
|
||
|
||
## Решение
|
||
|
||
Это может быть немного сложно, потому что JSX очень похож на HTML, но **не тот же** .
|
||
|
||
Давайте проведем шаги, чтобы вы поняли разницу. Сначала установите тэг стиля в **объект JavaScript** .
|
||
|
||
```jsx
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{}}>
|
||
Big Red
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Теперь у вас есть тег стиля, установленный на пустой объект. Обратите внимание, что есть два набора фигурных скобок. Это важное различие между JSX и HTML.
|
||
|
||
Во-вторых, давайте установим красный цвет.
|
||
|
||
```jsx
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{ color: 'red' }}>
|
||
Big Red
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Наконец, давайте установим размер шрифта в 72px.
|
||
|
||
### Спойлер
|
||
|
||
```jsx
|
||
class Colorful extends React.Component {
|
||
render() {
|
||
return (
|
||
<div style={{ color: 'red', fontSize: '72'}}>
|
||
Big Red
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Обратите внимание, что атрибут JSX - это **camelCase** . Это еще одно важное отличие, чтобы помнить о JSX. Кроме того, вы, вероятно, заметили, что нет единицы. В JSX при настройке атрибута fontSize **блок является необязательным** и автоматически устанавливается в px, если он не задан вручную. |