freeCodeCamp/guide/portuguese/certifications/front-end-libraries/react/introducing-inline-styles/index.md

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.