Práticas recomendadas do estilo inline React.js

Estou ciente de que você pode especificar estilos nas classes React, assim:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Devo ter o objetivo de criar todos os estilos dessa maneira e não ter nenhum estilo especificado no meu arquivo CSS?

Ou devo evitar completamente os estilos embutidos?

Parece estranho e confuso fazer um pouco dos dois - dois lugares precisariam ser verificados ao ajustar o estilo.

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% widthe 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

O atributo style no React espera que o valor seja um objeto, ou seja, par de valores-chave.

style = {}terá outro objeto dentro dele {float:'right'}para fazê-lo funcionar.

<span style={{float:'right'}}>{'Download Audit'}</span>

Espero que isso resolva o problema

Eu uso estilos inline extensivamente nos meus componentes do React. Acho muito mais claro colocar estilos dentro dos componentes porque é sempre claro quais estilos o componente tem ou não. Além disso, ter todo o poder do Javascript em mãos realmente simplifica as necessidades de estilo mais complexas.

Eu não estava convencido no começo, mas depois de me envolver com isso por vários meses, estou totalmente convertido e estou no processo de converter todo o meu CSS para inline ou outros métodos css controlados por JS.

Esta apresentação do funcionário do Facebook e do colaborador do React "vjeux" também é muito útil - https://speakerdeck.com/vjeux/react-css-in-js

O principal objetivo do atributo style é para estilos dinâmicos baseados em estado. Por exemplo, você pode ter um estilo de largura em uma barra de progresso com base em algum estado, ou a posição ou visibilidade com base em outra coisa.

Os estilos em JS impõem a limitação de que o aplicativo não pode fornecer estilo personalizado para um componente reutilizável. Isso é perfeitamente aceitável nas situações mencionadas acima, mas não quando você altera as características visíveis, especialmente a cor.

James K Nelson, em sua carta "Por que você não deve estilizar reagir componentes com JavaScript", afirma que não há realmente a necessidade de usar estilos embutidos com suas desvantagens. Sua afirmação é que css antigo e chato com menos / scss é a melhor solução. A parte de suas teses em favor de css:

• extensível externamente
• aproveitável (os estilos em linha sobrepõem tudo)
• designer-friendly

O estilo no JSX é muito semelhante ao estilo no HTML.

Caso HTML:

div style = "cor do plano de fundo: vermelho; cor: branco"

Caso JSX:

div style = {{backgroundColor: 'vermelho', cor: 'branco'}}

O que faço é atribuir a cada um dos meus componentes reutilizáveis ​​um nome exclusivo de elemento personalizado e, em seguida, criar um arquivo css para esse componente, especificamente, com todas as opções de estilo para esse componente (e apenas para esse componente).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

E no arquivo 'custom-component.css', cada entrada começará com a tag custom-component:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

Isso significa que você não perde a noção crítica de separar a preocupação. Ver vs estilo. Se você compartilhar seu componente, é mais fácil para outros o tema corresponder ao restante da página da web.

Depende realmente do tamanho do seu aplicativo, se você deseja usar empacotadores como webpack e agrupar CSS e JS juntos na compilação e como deseja gerenciar o fluxo do aplicativo! No final do dia, depende da sua situação, você pode tomar uma decisão!

Minha preferência pela organização de arquivos em grandes projetos é a separação de arquivos CSS e JS ; pode ser mais fácil compartilhar, mais fácil para as pessoas da interface do usuário passarem por arquivos CSS, também uma organização de arquivos muito mais organizada para todo o aplicativo!

Sempre pense assim, certifique-se de que, na fase de desenvolvimento, tudo esteja onde deveria estar, nomeado corretamente e seja fácil para outros desenvolvedores encontrarem coisas ...

Eu pessoalmente os misturo depende da minha necessidade, por exemplo ... Tente usar css externo, mas se necessário o React também aceitará estilo, você precisará passá-lo como um objeto com valor-chave, algo como isto abaixo:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Aqui está o estilo baseado em booleano na sintaxe JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}

Normalmente, tenho um arquivo scss associado a cada componente React. Mas não vejo razão para você não encapsular o componente com a lógica e procurá-lo. Quero dizer, você tem algo parecido com os componentes da web.

Dependendo da sua configuração, o estilo em linha pode oferecer recarga a quente. A página da Web é imediatamente renderizada novamente toda vez que o estilo muda. Isso me ajuda a desenvolver componentes mais rapidamente. Dito isto, tenho certeza de que você pode configurar um ambiente de recarga a quente para CSS + SCSS.

Você pode usar estilos embutidos, mas você terá algumas limitações se usá-los em todos os seus estilos. Algumas limitações conhecidas são que você não pode usar pseudo-seletores CSS e consultas de mídia .

Você pode usar o Radium para resolver isso, mas ainda assim, acho que o projeto cresce, vai ficar complicado.

Eu recomendaria o uso de módulos CSS .

Usando os Módulos CSS, você terá a liberdade de escrever CSS no arquivo CSS e não precisará se preocupar com os conflitos de nomes, pois os Módulos CSS serão atendidos.

Uma vantagem desse método é que ele fornece funcionalidade de estilo para o componente específico. Isso criará um código muito mais sustentável e uma arquitetura de projeto legível para o próximo desenvolvedor trabalhar no seu projeto.

Para alguns componentes, é mais fácil usar estilos embutidos. Além disso, acho mais fácil e conciso (como estou usando Javascript e não CSS) animar estilos de componentes.

Para componentes independentes, eu uso o 'Spread Operator' ou o '...'. Para mim, é claro, bonito e funciona em um espaço apertado. Aqui está uma pequena animação de carregamento que eu fiz para mostrar seus benefícios:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

EDITAR NOVEMBRO 2019

Trabalhando no setor (uma empresa da Fortune 500), NÃO estou autorizado a fazer nenhum estilo em linha. Em nossa equipe, decidimos que o estilo embutido é ilegível e não pode ser mantido. E, depois de ter visto em primeira mão como os estilos embutidos tornam o suporte a um aplicativo completamente intolerável, eu teria que concordar. Eu desencorajo completamente os estilos embutidos.

O problema com os estilos embutidos é que as Políticas de Segurança de Conteúdo (CSP) estão se tornando mais comuns, o que não permite isso. Portanto, eu recomendo evitar estilos inline completamente.

Atualização: para explicar melhor, os CSP são cabeçalhos HTTP enviados pelo servidor que restringem o conteúdo que pode aparecer na página. É simplesmente uma atenuação adicional que pode ser aplicada a um servidor para impedir que um invasor faça algo impertinente se o desenvolvedor codificar mal o site.

O objetivo da maioria dessas restrições é interromper os ataques XSS (cross-site scripting). O XSS é onde um invasor descobre uma maneira de incluir seu próprio javascript na sua página (por exemplo, se eu criar meu nome de usuário bob<SCRIPT>alert("hello")</SCRIPT>e depois postar um comentário, e você visitar a página, ele não deve exibir um alerta). Os desenvolvedores devem negar a possibilidade de um usuário adicionar conteúdo como este ao site, mas, caso cometam algum erro, o CSP impede o carregamento da página, caso encontre alguma script>tag.

O CSP é apenas um nível extra de proteção para os desenvolvedores, para garantir que, se cometerem um erro, um invasor não possa causar problemas aos visitantes desse site.

Portanto, tudo é XSS, mas e se o invasor não puder incluir <script>tags, mas puder incluir <style>tags ou incluir um style=parâmetro em uma tag? Em seguida, ele poderá alterar a aparência do site de maneira que você seja enganado a clicar no botão errado ou em algum outro problema. Isso é muito menos preocupante, mas ainda há algo a ser evitado, e o CSP faz isso por você.

Um bom recurso para testar um site para CSP é https://securityheaders.io/

Você pode ler mais sobre o CSP em: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Comparando a gravação de seus estilos em um arquivo css, o atributo de estilo do React possui as seguintes vantagens :

1. A capacidade de usar o javascript das ferramentas como uma linguagem de programação fornece para controlar o estilo de seus elementos. Isso inclui incorporar variáveis, usar condições e passar estilos para um componente filho.
2. Uma abordagem "componental". Não há mais separação de códigos HTML, JS e CSS gravados para o componente. O código do componente é consolidado e escrito em um só lugar.

No entanto, o atributo de estilo do React vem com algumas desvantagens - você não pode

1. Não é possível usar consultas de mídia
2. Não é possível usar pseudo-seletores,
3. menos eficiente em comparação com as classes CSS.

Usando CSS em JS, você pode obter todas as vantagens de uma tag de estilo, sem essas desvantagens . Atualmente, existem alguns css populares e bem suportados nas bibliotecas js, incluindo: Emotion, Styled-Components e Radium. Essas bibliotecas são para css o tipo de React para HTML. Eles permitem que você escreva seu CSS e controle seu CSS em seu código JS.

vamos comparar como nosso código procurará estilizar um elemento simples. Criaremos uma div do "olá mundo" para que ela seja grande no computador e menor no celular.

Usando o atributo style

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Como a consulta de mídia não é possível em uma tag de estilo, teremos que adicionar um className ao elemento e adicionar uma regra css.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Usando a tag 10 css do Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

O Emotion também suporta seqüências de caracteres de modelo e componentes com estilo. Então, se você preferir, pode escrever:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

Por trás do capô "Css em JS" usa classes css. A emoção foi criada especificamente com o desempenho em mente e usa o cache. Comparado aos atributos de estilo React, o Css em JS fornecerá melhor desempenho.

Melhores Práticas

Aqui estão algumas práticas recomendadas que eu recomendo:

1. Se você deseja estilizar seus elementos embutidos ou em seu JS, use uma biblioteca css-in-js, não use um atributo style.

Devo ter o objetivo de criar todos os estilos dessa maneira e não ter nenhum estilo especificado no meu arquivo CSS?

2. Se você usar uma solução css-in-js, não há necessidade de escrever estilos nos arquivos Css. Escrever seu css em JS é superior, pois você pode usar todas as ferramentas que uma linguagem de programação fornecida por JS.

devo evitar completamente os estilos embutidos?

3. Estruturar seu código de estilo em JS é bastante semelhante à estruturação de seu código em geral. Por exemplo:
   • reconheça estilos que se repetem e escreva-os em um só lugar. Há duas maneiras de fazer isso no Emotion:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• O padrão de codificação de reação é de componentes encapsulados - HTML e JS que controlam um componente são gravados em um arquivo. É aí que o código css / style para estilizar esse componente pertence.

• Quando necessário, adicione um suporte de estilo ao seu componente. Dessa maneira, você pode reutilizar o código e o estilo escritos em um componente filho e personalizá-lo de acordo com suas necessidades específicas pelo componente pai.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Você também pode usar o StrCSS, ele cria nomes de classe isolados e muito mais! O código de exemplo seria semelhante. Você pode (opcional) instalar a extensão VSCode no Visual Studio Marketplace para obter suporte à realce de sintaxe!

fonte: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

Algum tempo exigimos estilizar algum elemento de um componente, mas se tivermos que exibir apenas esse componente ou o estilo é tão menor, em vez de usar a classe CSS, optamos pelo estilo inline em react js. O estilo inline reactjs é igual ao estilo inline HTML, apenas os nomes das propriedades são um pouco diferentes

Escreva seu estilo em qualquer tag usando style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Atualização 2020: A melhor prática é usar uma biblioteca que já fez o trabalho duro para você e não mata sua equipe quando você faz a troca, conforme indicado pela resposta originalmente aceita neste vídeo (ainda é relevante). Também para entender as tendências, este é um gráfico muito útil . Depois de fazer minha própria pesquisa sobre isso, escolhi usar o Emotion para meus novos projetos e ele provou ser muito flexível e escalável.

Dado que a resposta mais votada de 2015 recomendou o Radium, que agora é relegado ao modo de manutenção . Portanto, parece razoável adicionar uma lista de alternativas. O pós- interrupção do Radium sugere algumas bibliotecas. Cada um dos sites vinculados tem exemplos prontamente disponíveis, então evitarei copiar e colar o código aqui.

• A emoção que é "inspirada" por componentes estilizados, entre outros, usa estilos em js e pode ser independente da estrutura, mas definitivamente promove sua biblioteca React. A emoção foi mantida atualizada até esta postagem.
• componentes estilizados são comparáveis ​​e oferecem muitos dos mesmos recursos que o Emotion. Também sendo ativamente mantido. Tanto a emoção quanto os componentes com estilo têm sintaxe semelhante. Ele foi criado especificamente para trabalhar com componentes do React.
• JSS Ainda outra opção para estilos em js, que é independente da estrutura, embora tenha vários pacotes de estrutura, o React-JSS entre eles.

Enfim css inline nunca é recomendado. Usamos componentes estilizados em nosso projeto, que é baseado em JSS. Ele protege a substituição de CSS adicionando nomes de classes dinâmicos nos componentes. Você também pode adicionar valores de css com base nos adereços passados.