freeCodeCamp

4.5 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036182	Add Inline Styles in React	6	false		Adicionar estilos inline em React

Description

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.

Instructions

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 .

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

4.5 KiB Raw Blame History