style
definido para um objeto JavaScript. Primeiro, os nomes de certas propriedades de estilo CSS usam o caso camel. Por exemplo, o último desafio definiu o tamanho da fonte com fontSize
vez de font-size
de font-size
. Palavras hifenizadas como font-size
são uma sintaxe inválida para as propriedades do objeto JavaScript, portanto, o React usa o caso camel. Como regra, todas as propriedades de estilo hifenizadas são escritas usando o caso camel no JSX. Todas as unidades de comprimento de propriedade (como height
, width
e height
fontSize
) são consideradas como px
menos que especificado de outra forma. Se você quiser usá- em
, por exemplo, você coloca o valor e as unidades entre aspas, como {fontSize: "4em"}
. Além dos valores de comprimento que são padrão para px
, todos os outros valores de propriedade devem ser agrupados entre aspas. object
estilo a uma constante para manter seu código organizado. Descomente os styles
constantes e declare um object
com três propriedades de estilo e seus valores. Dê ao div
uma cor de "purple"
, um tamanho de fonte de 40
e uma borda de "2px solid purple"
. Em seguida, defina o atributo style
igual à constante de styles
. styles
deve ser um object
com três propriedades.
testString: 'assert(Object.keys(styles).length === 3, "The styles
variable should be an object
with three properties.");'
- text: A variável de styles
deve ter uma propriedade color
definida como um valor de purple
.
testString: 'assert(styles.color === "purple", "The styles
variable should have a color
property set to a value of purple
.");'
- text: A variável de styles
deve ter uma propriedade fontSize
definida como um valor de 40
.
testString: 'assert(styles.fontSize === 40, "The styles
variable should have a fontSize
property set to a value of 40
.");'
- text: A variável de styles
deve ter uma propriedade de border
definida como um 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: O componente deve renderizar um elemento div
.
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div
element.");'
- text: O elemento div
deve ter seus estilos definidos pelo objeto 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.");'
```