freeCodeCamp/curriculum/challenges/russian/03-front-end-libraries/react/introducing-inline-styles.russian.md

id, title, challengeType, isRequired, forumTopicId, localeTitle

id	title	challengeType	isRequired	forumTopicId	localeTitle
5a24c314108439a4d4036181	Introducing Inline Styles	6	false	301395	Представление встроенных стилей

Description

Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за того, как вы применяете классы к элементам JSX . Если вы импортируете стили из таблицы стилей, это совсем не так. Вы применяете класс к своему элементу JSX, используя атрибут className , и применяете стили к классу в таблице стилей. Другой вариант - применить встроенные стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div> Элементы JSX используют атрибут style , но из-за того, что JSX переполнен, вы можете 't установить значение в string . Вместо этого вы устанавливаете его равным object JavaScript. Вот пример: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div> Обратите внимание, как мы camelCase свойство fontSize? Это связано с тем, что React не будет принимать ключи кебаба в объекте стиля. React применит правильное имя свойства для нас в HTML.

Instructions

Добавьте атрибут style в div в редакторе кода, чтобы придать тексту цвет красного и размер шрифта 72px. Обратите внимание, что вы можете указать размер шрифта как число, опустив единицы «px» или записать его как «72px».

Tests

tests:
  - text: The component should render a <code>div</code> element.
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })());
  - text: The <code>div</code> element should have a color of <code>red</code>.
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })());
  - text: The <code>div</code> element should have a font size of <code>72px</code>.
    testString: 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'); })());

Challenge Seed

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

After Tests

ReactDOM.render(<Colorful />, document.getElementById('root'))

Solution

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