3.7 KiB
3.7 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036181 | Introducing Inline Styles | 6 | false | Apresentando Estilos Inline |
Description
className
e aplica estilos à classe em sua folha de estilo. Outra opção é aplicar estilos inline , que são muito comuns no desenvolvimento do ReactJS. Você aplica estilos embutidos a elementos JSX semelhantes a como você faz isso em HTML, mas com algumas diferenças de JSX. Aqui está um exemplo de um estilo in-line em HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div>
Elementos JSX usam o atributo style
, mas devido à maneira como o JSX é transpilado, você pode é possível definir o valor para uma string
. Em vez disso, você define isso como um object
JavaScript. Aqui está um exemplo: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
Observe como camelCase a propriedade "fontSize"? Isso ocorre porque o React não aceitará as chaves do caso do kebab no objeto de estilo. Reagir aplicará o nome da propriedade correta para nós no HTML. Instructions
style
ao div
no editor de código para dar ao texto uma cor vermelha e um tamanho de fonte de 72px. Observe que você pode, opcionalmente, definir o tamanho da fonte como um número, omitindo as unidades "px" ou gravá-lo como "72px". Tests
tests:
- text: O componente deve renderizar um 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: O elemento <code>div</code> deve ter uma cor <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: O elemento <code>div</code> deve ter um tamanho de fonte 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