0a1eeea424
* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
1.4 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Introducing Inline Styles | Apresentando Estilos Inline |
Apresentando Estilos Inline
Solução
Este pode ser um pouco complicado, porque o JSX é muito semelhante ao HTML, mas não é o mesmo .
Vamos percorrer os passos para que você entenda a diferença. Primeiro, defina sua tag de estilo para um objeto JavaScript .
class Colorful extends React.Component {
render() {
return (
<div style={{}}>
Big Red
</div>
);
}
};
Agora você tem sua tag de estilo definida para um objeto vazio. Observe como há dois conjuntos de chaves. Essa é uma diferença importante entre JSX e HTML.
Em segundo lugar, vamos definir a cor para vermelho.
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red' }}>
Big Red
</div>
);
}
};
Finalmente, vamos definir o tamanho da fonte para 72px.
Spoiler
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red', fontSize: '72'}}>
Big Red
</div>
);
}
};
Observe como o atributo JSX é camelCase . Essa é outra diferença importante a ser lembrada sobre o JSX. Além disso, você provavelmente notou que não há unidade. No JSX, ao definir o atributo fontSize, a unidade é opcional e será definida automaticamente como px, se não definida manualmente.