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

id, title, challengeType, isRequired, forumTopicId, localeTitle

id	title	challengeType	isRequired	forumTopicId	localeTitle
5a24c314108439a4d4036182	Add Inline Styles in React	6	false	301378	Добавить встроенные стили в действии

Description

Возможно, вы заметили в последнем случае, что в дополнение к атрибуту style установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют случай верблюда. Например, последний вызов задает размер шрифта с fontSize вместо font-size . Переплетенные слова, такие как font-size являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует случай верблюда. Как правило, любые свойства дефисного стиля записываются с использованием верблюжьего случая в JSX. Предполагается, что все единицы длины значения свойства (например, height , width и fontSize ) находятся в px если не указано иное. Если вы хотите использовать em , например, вы переносите значение и единицы в кавычки, например {fontSize: "4em"} . Помимо значений длины, которые по умолчанию px , все остальные значения свойств должны быть заключены в кавычки.

Instructions

If you have a large set of styles, you can assign a style object to a constant to keep your code organized. Uncomment the styles constant and declare an object with three style properties and their values. Give the div a color of "purple", a font-size of 40, and a border of "2px solid purple". Then set the style attribute equal to the styles constant.

Tests

tests:
  - text: The <code>styles</code> variable should be an <code>object</code> with three properties.
    testString: assert(Object.keys(styles).length === 3);
  - text: The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.
    testString: assert(styles.color === 'purple');
  - text: The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.
    testString: assert(styles.fontSize === 40);
  - text: The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.
    testString: assert(styles.border === "2px solid purple");
  - text: The component should render a <code>div</code> element.
    testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })());
  - text: The <code>div</code> element should have its styles defined by the <code>styles</code> object.
    testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })());

Challenge Seed

// const styles =
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
    );
    // change code above this line
  }
};

After Tests

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

Solution

const styles = {
  color: "purple",
  fontSize: 40,
  border: "2px solid purple"
};
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={styles}>Style Me!</div>
  // change code above this line
    );
  }
};