4.5 KiB
4.5 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036182 | Add Inline Styles in React | 6 | false | Adicionar estilos inline em React |
Description
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. Instructions
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
. Tests
tests:
- text: A variável de <code>styles</code> deve ser um <code>object</code> com três propriedades.
testString: 'assert(Object.keys(styles).length === 3, "The <code>styles</code> variable should be an <code>object</code> with three properties.");'
- text: A variável de <code>styles</code> deve ter uma propriedade <code>color</code> definida como um valor de <code>purple</code> .
testString: 'assert(styles.color === "purple", "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.");'
- text: A variável de <code>styles</code> deve ter uma propriedade <code>fontSize</code> definida como um valor de <code>40</code> .
testString: 'assert(styles.fontSize === 40, "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.");'
- text: A variável de <code>styles</code> deve ter uma propriedade de <code>border</code> definida como um valor de <code>2px solid purple</code> .
testString: 'assert(styles.border === "2px solid purple", "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.");'
- text: O componente deve renderizar um elemento <code>div</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a <code>div</code> element.");'
- text: O elemento <code>div</code> deve ter seus estilos definidos pelo objeto <code>styles</code> .
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 <code>div</code> element should have its styles defined by the <code>styles</code> object.");'
Challenge Seed
// 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
}
};
After Test
console.info('after the test');
Solution
// solution required