Introdução
Em projetos de front-end que raramente exigem um aplicativo de página única, os estilos embutidos de elementos DOM são frequentemente colocados no elemento de destino. >' atributo.
Mas no React, as coisas são bem diferentes em relação ao estilo inline. Este guia se concentra em conseguir isso usando um exemplo real de criação de um componente Cartão de perfil de usuário.
Estilizando componentes no React
Você já deve estar ciente da maneira regular de estilizar componentes React usando o atributo classname em conjunto com uma folha de estilo externa:
import React from 'react' import './style.css' function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) } jsx
paragraph-text{ font-weight: bold; color: beige; } CSS
Estilos embutidos
Obter o mesmo resultado com estilos embutidos funciona de maneira bem diferente. Para usar estilos inline no React, use o atributo style, que aceita um objeto JavaScript com propriedades camel. Exemplo:
function MyComponent(){ return Inline Styled Component } Observe que o valor de preenchimento não possui uma unidade porque o React adiciona um 'px 'sufixo para algumas propriedades de estilo numérico embutido. Nos casos em que você precisa usar outras unidades, como 'em' ou 'rem', especifique explicitamente a unidade com o valor como uma string. Aplicar isso à propriedade padding deve ser o preenchimento: '1,5em' .
Além disso, esses estilos não são prefixados automaticamente pelo fornecedor, portanto, é necessário adicionar prefixos do fornecedor manualmente.
Melhore a legibilidade
A legibilidade do MyComponent cai drasticamente se os estilos se tornarem muitos e tudo ficar desajeitado. Conforme mostrado abaixo, como os estilos são apenas objetos, eles podem ser removidos do componente.
const myComponentStyle = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return Inline Styled Component } jsx
Construindo um componente de cartão
Vamos construir o componente do cartão do usuário.
const cardStyles = { container: { display: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> } Regra prática
A documentação oficial do React recomenda o uso de estilo inline como o principal meio de estilizar projetos e recomenda o uso do atributo className.
Nota Alguns exemplos na documentação usam um estilo por conveniência, mas geralmente não é recomendado usar o atributo style como principal meio de estilizar elementos.
Na maioria dos casos, nome da classe s devem se referir a classes definidas em uma folha de estilo CSS externa. Os estilos são frequentemente usados em aplicativos React para adicionar estilos calculados dinamicamente no momento da renderização.