freeCodeCamp

4.5 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036182	Add Inline Styles in React	6	false		Añadir estilos en línea en reaccionar

Description

Es posible que haya notado en el último desafío que existían otras diferencias de sintaxis con respecto a los estilos HTML en línea además del atributo de 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.

Instructions

Si tiene un gran conjunto de estilos, puede asignar un 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 .

Tests

tests:
  - text: La variable de <code>styles</code> debe ser un <code>object</code> con tres propiedades.
    testString: 'assert(Object.keys(styles).length === 3, "The <code>styles</code> variable should be an <code>object</code> with three properties.");'
  - text: La variable de <code>styles</code> debe tener una propiedad de <code>color</code> establecida en un 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: La variable de <code>styles</code> debe tener una propiedad <code>fontSize</code> establecida en un 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: La variable de <code>styles</code> debe tener una propiedad de <code>border</code> establecida en un 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: El componente debe representar un 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: El elemento <code>div</code> debe tener sus estilos definidos por el objeto de <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