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

// 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
  }
};


index

Добавление встроенных стилей в React

Add Inline Styles in React

The <code>styles</code> variable should be an <code>object</code> with three properties.

The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.

The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.

The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.

The component should render a <code>div</code> element.

The <code>div</code> element should have its styles defined by the <code>styles</code> object.

front-end-libraries

React

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
  }
};


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
  }
};


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
  }
};


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
  }
};


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
  }
};


RichText

если 40 и "40px" одно и тоже, то почему последний вариант не считается правильным? ну и задача - раскрасить элемент div в фиолетовый, я понял как background: purple. color же относиться к цвету текста, а не к самому элементу div.

Обсуждение задания "Add Inline Styles in React"

Уроки

40 и "40px" - это все же не одно и то же. Да, в случае с реактом на выходе мы получим одно и то же, но это уже механика реакта. Он просто так устроен, что если на вход число, то это будут пиксели (то есть он конвертирует). Но в задаче все же ожидается 40 (именно число), так что если что-то другое - то это не 40.

С цветом тоже немного не так. Там же в стилях два раза purple:

Один для цвета текста (color), а другой для границ (бордера).

FreeCode.Academy

Обсуждение задания "Add Inline Styles in React"

Добавить комментарий