freeCodeCamp/guide/russian/certifications/front-end-libraries/react/introducing-inline-styles/index.md

title	localeTitle
Introducing Inline Styles	Представление встроенных стилей

Представление встроенных стилей

Решение

Это может быть немного сложно, потому что JSX очень похож на HTML, но не тот же .

Давайте проведем шаги, чтобы вы поняли разницу. Сначала установите тэг стиля в объект JavaScript .

class Colorful extends React.Component { 
  render() { 
    return ( 
      <div style={{}}> 
        Big Red 
      </div> 
    ); 
  } 
 }; 

Теперь у вас есть тег стиля, установленный на пустой объект. Обратите внимание, что есть два набора фигурных скобок. Это важное различие между JSX и HTML.

Во-вторых, давайте установим красный цвет.

class Colorful extends React.Component { 
  render() { 
    return ( 
      <div style={{ color: 'red' }}> 
        Big Red 
      </div> 
    ); 
  } 
 }; 

Наконец, давайте установим размер шрифта в 72px.

Спойлер

class Colorful extends React.Component { 
  render() { 
    return ( 
      <div style={{ color: 'red', fontSize: '72'}}> 
        Big Red 
      </div> 
    ); 
  } 
 }; 

Обратите внимание, что атрибут JSX - это camelCase . Это еще одно важное отличие, чтобы помнить о JSX. Кроме того, вы, вероятно, заметили, что нет единицы. В JSX при настройке атрибута fontSize блок является необязательным и автоматически устанавливается в px, если он не задан вручную.