Ainda não existem muitas "Práticas recomendadas". Aqueles de nós que estão usando estilos embutidos, para componentes React, ainda estão experimentando muito.
Existem várias abordagens que variam muito: Reagir o gráfico de comparação de libs no estilo embutido
Tudo ou nada?
O que chamamos de "estilo" inclui alguns conceitos:
- Layout - como um elemento / componente se parece em relação aos outros
- Aparência - as características de um elemento / componente
- Comportamento e estado - como um elemento / componente se parece em um determinado estado
Comece com estilos de estado
O React já está gerenciando o estado de seus componentes, isso faz com que os estilos de estado e comportamento sejam naturais para a colocação com a lógica dos componentes.
Em vez de criar componentes para renderizar com classes de estado condicionais, considere adicionar estilos de estado diretamente:
// Typical component with state-classes
<li
className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />
// Using inline-styles for state
<li className='todo-list__item'
style={(item.complete) ? styles.complete : {}} />
Observe que estamos usando uma classe para estilizar a aparência, mas não usamos mais nenhuma .is-
classe prefixada para estado e comportamento .
Podemos usar Object.assign
(ES6) ou _.extend
(sublinhado / lodash) para adicionar suporte a vários estados:
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
Personalização e reutilização
Agora que estamos usando Object.assign
, fica muito simples tornar nosso componente reutilizável com estilos diferentes. Se queremos substituir os estilos padrão, podemos fazê-lo na chamada local com adereços, assim: <TodoItem dueStyle={ fontWeight: "bold" } />
. Implementado assim:
<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>
Layout
Pessoalmente, não vejo motivos convincentes para estilos de layout embutidos. Existem vários sistemas de layout CSS excelentes por aí. Eu apenas usaria um.
Dito isto, não adicione estilos de layout diretamente ao seu componente. Envolva seus componentes com componentes de layout. Aqui está um exemplo.
// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
className="col-xs-12 col-sm-6 col-md-8"
firstName="Michael"
lastName="Chan" />
// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
<UserBadge
firstName="Michael"
lastName="Chan" />
</div>
Para suporte ao layout, costumo tentar projetar componentes para ser 100%
width
e height
.
Aparência
Esta é a área mais controversa do debate "estilo embutido". Por fim, cabe ao componente o seu design e o conforto da sua equipe com o JavaScript.
Uma coisa é certa, você precisará da ajuda de uma biblioteca. Os estados do navegador ( :hover
, :focus
) e as consultas da mídia são dolorosos no React bruto.
Gosto do Radium porque a sintaxe para essas partes duras foi projetada para modelar a do SASS.
Organização do código
Frequentemente, você verá um objeto de estilo fora do módulo. Para um componente da lista de tarefas, pode ser algo como isto:
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
funções getter
Adicionar um monte de lógica de estilo ao seu modelo pode ficar um pouco confuso (como visto acima). Eu gosto de criar funções getter para calcular estilos:
React.createClass({
getStyles: function () {
return Object.assign(
{},
item.props.complete && styles.complete,
item.props.due && styles.due,
item.props.due && this.props.dueStyles
);
},
render: function () {
return <li style={this.getStyles()}>{this.props.item}</li>
}
});
Assistindo mais
Eu discuti tudo isso com mais detalhes no React Europe no início deste ano: Estilos em linha e quando é melhor "apenas usar CSS" .
Fico feliz em ajudá-lo a fazer novas descobertas pelo caminho :) Entre em contato -> @chantastic