3.7 KiB
3.7 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036181 | Introducing Inline Styles | 6 | false | Introducción a los estilos en línea |
Description
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
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