Você deve ter notado no último desafio que havia várias outras diferenças de sintaxe dos estilos inline em HTML, além do atributo 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.

Se você tiver um grande conjunto de estilos, poderá atribuir um 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 .

```yml tests: - text: A variável de 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.");' ```