css - div - react style input



Práticas recomendadas de estilo in-line React.js (10)

É realmente depende de quão grande é o seu aplicativo, se você quiser usar bundlers como o webpack e empacotar CSS e JS juntos na compilação e como você quer gerenciar o fluxo de seu aplicativo! No final do dia, depende da sua situação, você pode tomar uma decisão!

Minha preferência por organizar arquivos em grandes projetos é separar os arquivos CSS e JS , pode ser mais fácil de compartilhar, mais fácil para as pessoas da interface do usuário simplesmente passarem pelos arquivos CSS, também organizando arquivos de maneira mais simples para todo o aplicativo!

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

Eu pessoalmente misturá-los depende da minha necessidade, por exemplo ... Tente usar o css externo, mas se for necessário, o React também aceitará o estilo, você precisará passá-lo como um objeto com valor de chave, algo assim 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;

https://src-bin.com

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 estar com o objetivo de fazer todo o estilo desta maneira, e não tenho estilos em tudo especificado no meu arquivo CSS?

Ou devo evitar estilos inline completamente?

Parece estranho e bagunçado fazer um pouco de ambos - dois lugares precisariam ser verificados ao ajustar o estilo.


Answer #1

Ainda não há muitas "melhores práticas". Aqueles de nós que estão usando estilos inline, para componentes React, ainda estão experimentando muito.

Existem várias abordagens que variam muito: Reactar o gráfico de comparação de lib de estilo in-line

Tudo ou nada?

O que nos referimos como "estilo", na verdade, 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 aparece em um determinado estado

Comece com estilos de estado

O React já está gerenciando o estado de seus componentes, o que torna os estilos de estado e comportamento um ajuste natural para colocation com sua lógica de componente.

Em vez de criar componentes para renderizar com classes de estados 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 mais usando nenhuma classe .is- prefixada para estado e comportamento .

Podemos usar Object.assign (ES6) ou _.extend (sublinhado / lodash) para adicionar suporte a múltiplos 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 o Object.assign , torna-se muito simples tornar nosso componente reutilizável com estilos diferentes. Se quisermos substituir os estilos padrão, podemos fazê-lo no site de chamadas com adereços, da seguinte forma: <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 inline. Existem vários sistemas de layout CSS por aí. Eu apenas usaria um.

Dito isso, 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 de layout, muitas vezes, tento projetar componentes para ter 100% width e height .

Aparência

Esta é a área mais contenciosa do debate "inline-style". Por fim, cabe ao componente projetar e ao conforto da sua equipe com JavaScript.

Uma coisa é certa, você precisará da ajuda de uma biblioteca. Os estados do navegador ( :hover :focus ) e as consultas de mídia são difíceis em React bruto.

Eu gosto do Radium porque a sintaxe para essas partes difíceis é projetada para modelar o SASS.

Organização de código

Muitas vezes você verá um objeto de estilo fora do módulo. Para um componente todo-lista, pode ser algo como isto:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

funções getter

Adicionando um monte de lógica de estilo para o 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>
  }
});

Mais assistindo

Discuti tudo isso com mais detalhes no React Europe no início deste ano: Inline Styles e quando é melhor usar apenas CSS .

Fico feliz em ajudar enquanto você faz novas descobertas ao longo do caminho :) Me @chantastic -> @chantastic


Answer #2

Eu costumo ter arquivo scss associado a cada componente React. Mas eu não vejo razão para você não encapsular o componente com lógica e procurar nele. Quero dizer, você tem algo parecido com componentes da web.


Answer #3

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

Eu não estava convencido no começo, mas depois de mergulhar nele por vários meses, eu estou totalmente convertido e estou no processo de converter todo o meu CSS para in-line ou outros métodos CSS baseados em JS.

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


Answer #4

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

style = {} terá outro objeto dentro dele como {float:'right'} para fazer funcionar.

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

Espero que isso resolva o problema


Answer #5

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

Caso HTML:

estilo div = "cor de fundo: vermelho; cor: branco"

Caso JSX:

estilo div = {{backgroundColor: 'red', color: 'white'}}


Answer #6

O problema com os estilos in-line é 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 desobediente se o desenvolvedor codificar o site de maneira inadequada.

O objetivo da maioria dessas restrições é interromper os ataques XSS (cross-site scripting). XSS é onde um atacante descobre uma maneira de incluir seu próprio javascript em sua página (por exemplo, se eu fizer meu nome de usuário bob<SCRIPT>alert("hello")</SCRIPT> e, em seguida, postar um comentário, e você visitar o página, não deve mostrar um alerta). Os desenvolvedores devem negar a possibilidade de um usuário adicionar conteúdo como este ao site, mas caso tenham cometido um erro, o CSP bloqueará o carregamento da página se encontrar qualquer script> tags.

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

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

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

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


Answer #7

O que eu faço é dar a cada um dos meus componentes reutilizáveis ​​um nome de elemento personalizado exclusivo e, em seguida, criar um arquivo css para esse componente, especificamente, com todas as opções de estilo para esse componente (e somente 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 será iniciada com a tag de componente customizado:

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 separação de interesses. Ver estilo vs. Se você compartilha seu componente, é mais fácil para outros temas que correspondam ao resto de sua página da web.


Answer #8

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

Você pode usar Radium https://github.com/FormidableLabs/radium para resolver isso, mas ainda assim, eu sinto que o projeto cresce, vai ficar pesado.

Eu recomendaria usar módulos CSS github.com/css-modules/css-modules

Usando CSS Modules você terá a liberdade de escrever CSS no arquivo CSS e não precisa se preocupar com os confrontos de nomenclatura, ele será cuidado por CSS Modules.

Uma vantagem desse método é que ele oferece 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 em seu projeto.


Answer #9

Você também pode usar StrCSS, cria nomes de classes isolados e muito mais! Exemplo de código seria semelhante. Você pode (opcional) instalar a extensão VSCode do Visual Studio Marketplace para suporte ao realce de sintaxe!

fonte: https://github.com/jeffreylanters/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>;
  }
}




react-jsx