style
установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют случай верблюда. Например, последний вызов задает размер шрифта с fontSize
вместо font-size
. Переплетенные слова, такие как font-size
являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует случай верблюда. Как правило, любые свойства дефисного стиля записываются с использованием верблюжьего случая в JSX. Предполагается, что все единицы длины значения свойства (например, height
, width
и fontSize
) находятся в px
если не указано иное. Если вы хотите использовать em
, например, вы переносите значение и единицы в кавычки, например {fontSize: "4em"}
. Помимо значений длины, которые по умолчанию px
, все остальные значения свойств должны быть заключены в кавычки. styles
variable should be an object
with three properties.");'
- text: ''
testString: 'assert(styles.color === "purple", "The styles
variable should have a color
property set to a value of purple
.");'
- text: ''
testString: 'assert(styles.fontSize === 40, "The styles
variable should have a fontSize
property set to a value of 40
.");'
- text: ''
testString: 'assert(styles.border === "2px solid purple", "The styles
variable should have a border
property set to a value of 2px solid purple
.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div
element.");'
- text: ''
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"); })(), "The div
element should have its styles defined by the styles
object.");'
```