freeCodeCamp

3.7 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036181	Introducing Inline Styles	6	false		Introducción a los estilos en línea

Description

Hay otros conceptos complejos que agregan capacidades poderosas a su código React. Pero puede que se esté preguntando sobre el problema más simple de cómo diseñar los elementos JSX que crea en React. Probablemente sepa que no será exactamente lo mismo que trabajar con HTML debido a la forma en que aplica las clases a los elementos JSX . Si importa estilos de una hoja de estilo, no es muy diferente en absoluto. Aplicas una clase a tu elemento JSX usando el atributo className y aplicas estilos a la clase en tu hoja de estilo. Otra opción es aplicar estilos en línea , que son muy comunes en el desarrollo de ReactJS. Usted aplica estilos en línea a elementos JSX similares a cómo lo hace en HTML, pero con algunas diferencias JSX. Aquí hay un ejemplo de un estilo en línea en HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div> elementos JSX usan el atributo de style , pero debido a la forma en que se transpila JSX, puede 't establecer el valor a una string . En su lugar, lo establece igual a un object JavaScript. Aquí hay un ejemplo: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div> ¿Observa cómo la propiedad "fontSize" está en camelCase? Esto se debe a que React no aceptará claves de kebab en el objeto de estilo. React aplicará el nombre de propiedad correcto para nosotros en el HTML.

Instructions

Agregue un atributo de style al div en el editor de código para darle al texto un color rojo y un tamaño de fuente de 72px. Tenga en cuenta que, opcionalmente, puede configurar el tamaño de fuente como un número, omitiendo las unidades "px", o escribirlo como "72px".

Tests

tests:
  - text: El componente debe representar un elemento <code>div</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === "div"; })(), "The component should render a <code>div</code> element.");'
  - text: El elemento <code>div</code> debe tener un color <code>red</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === "red"; })(), "The <code>div</code> element should have a color of <code>red</code>.");'
  - text: El elemento <code>div</code> debe tener un tamaño de fuente de <code>72px</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === "72" || mockedComponent.children().props().style.fontSize === "72px"); })(), "The <code>div</code> element should have a font size of <code>72px</code>.");'

Challenge Seed

class Colorful extends React.Component {
  render() {
    return (
      <div>Big Red</div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

3.7 KiB Raw Blame History