style
establecido en un objeto de JavaScript. Primero, los nombres de ciertas propiedades de estilo CSS usan camel case. Por ejemplo, el último desafío establecer el tamaño de la fuente con fontSize
en lugar de font-size
. Las palabras con guión, como font-size
son sintaxis no válida para las propiedades de los objetos de JavaScript, por lo que React usa un caso de camello Como regla general, todas las propiedades de estilo con guión se escriben utilizando el caso camel en JSX. Se supone que todas las unidades de longitud de valor de propiedad (como height
, width
y fontSize
) están en px
menos que se especifique lo contrario. Si desea usar em
, por ejemplo, envuelva el valor y las unidades entre comillas, como {fontSize: "4em"}
. Aparte de los valores de longitud que predeterminan a px
, todos los demás valores de propiedad deben incluirse entre comillas. object
estilo a una constante para mantener su código organizado. Descomente la constante de styles
y declare un object
con tres propiedades de estilo y sus valores. Dale al div
un color de "purple"
, un tamaño de fuente de 40
, y un borde de "2px solid purple"
. A continuación, establezca el atributo de style
igual a la constante de styles
. styles
debe ser un object
con tres propiedades.
testString: 'assert(Object.keys(styles).length === 3, "The styles
variable should be an object
with three properties.");'
- text: La variable de styles
debe tener una propiedad de color
establecida en un valor de purple
.
testString: 'assert(styles.color === "purple", "The styles
variable should have a color
property set to a value of purple
.");'
- text: La variable de styles
debe tener una propiedad fontSize
establecida en un valor de 40
.
testString: 'assert(styles.fontSize === 40, "The styles
variable should have a fontSize
property set to a value of 40
.");'
- text: La variable de styles
debe tener una propiedad de border
establecida en un valor de 2px solid purple
.
testString: 'assert(styles.border === "2px solid purple", "The styles
variable should have a border
property set to a value of 2px solid purple
.");'
- text: El componente debe representar un elemento div
.
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div
element.");'
- text: El elemento div
debe tener sus estilos definidos por el objeto de styles
.
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.");'
```