Práticas recomendadas do estilo inline React.js

512

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.

eye_mew
fonte
Você pode usar o tema react para organizar seus estilos embutidos e torná-los facilmente personalizáveis ​​quando estiver criando um componente reutilizável. Funciona de maneira semelhante ao ThemeManager no material-ui .
Mantramantramantra
6
Considere usar github.com/css-modules/css-modules . github.com/gajus/react-css-modules é uma implementação do React (da qual sou o autor). Módulos CSS e React Modules CSS mapeiam automaticamente os nomes de classes de componentes para módulos CSS aos quais é atribuído um nome exclusivo no escopo do documento.
precisa saber é
1
Eu uso CSS enquanto tenho que escrever consultas de mídia. Eu também uso classes de uma biblioteca CSS básica como o bootstrap.
vijayst
Geralmente, não é recomendável usar o atributo style como principal meio de elementos de estilo. ( reactjs.org/docs/dom-elements.html#style )
Omid Ebrahimi
A partir de hoje, recomendo usar uma solução css-in-js. Tem todas as vantagens do atributo style, sem os inconvenientes. Eu escrevi uma resposta stackoverflow.com/questions/26882177/…
Ben Carp

Respostas:

463

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

chantastic
fonte
10
Ótima leitura. Também gostei muito dessa conversa relevante feita por você, @chantastic. #accepted
eye_mew
5
"Enrole seus componentes com componentes de layout": tão óbvio, mas exatamente o que eu precisava.
precisa saber é o seguinte
2
@chantastic ótima resposta. Um ano depois, tudo ainda é verdade? Apenas comecei a usar o React e a ideia de estilizar em linha e me perguntei se algo mudou desde que você postou esta resposta.
alexrussell
4
@alexrussell thanks! acho que a resposta aqui ainda se mantém muito bem. a única área que mudou é que Afrodite parece ser a biblioteca de arquivos em linha preferida pela comunidade (sobre Radium) - embora seja realmente uma questão de preferência pessoal.
chantastic 2/09/16
2
@alexrussell oops. acidentalmente enviado cedo. Agora eu uso essa técnica de componente para estilizar meus componentes. A ideia é muito simples. você cria componentes que só estão preocupados com a aplicação de estilo e compor com aqueles, em vez de div, span, a, etc. ele vai ajudar estilo keep isolado, independentemente de qual biblioteca você usa. reactpatterns.com/#Style component
chantastic
135

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

anandharshan
fonte
3
assim como usar consulta de mídia para o mesmo, se eu quiser usar classes CSS no arquivo JS
Pardeep Jain
@PardeepJain Uma forma é a utilização Emoção aqui é uma palestra completa do que se você estiver interessado de meet.js summit 2018
de Bruno Dedo
Uma desvantagem dessa abordagem é que a definição de estilos embutidos cria um novo objeto a cada vez. Isso cria uma diferença no stylesuporte que pode levar a problemas de desempenho. No mínimo, defina um estilo constante como esse fora do seu render. Espero que isto ajude!
Dawson B
49

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

Kyle Mathews
fonte
5
Como vou criar layouts responsivos com estilos em linha? Você não tem a opção para consultas de mídia aqui.
Zeus
Você obtém o poder de js, js pode detectar tamanhos de navegador para criar estilos dinamicamente.
JordyvD
3
De qualquer forma, a @ g3mini não é uma abordagem recomendada agora, já que existem soluções muito mais poderosas para criar componentes de estilo CSS Modules, styled-componentsentre outros.
Denialos
Há css em js também =) Eu prefiro usar módulos CSS para o momento.
JordyvD
Uma coisa que não é considerada aqui é que é muito fácil ver os estilos pai e filho no mesmo arquivo SASS, enquanto que se você precisar examinar as regras em diferentes componentes, talvez seja necessário abrir e fechar muitos arquivos.
Ringo
23

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.

Brigand
fonte
Uma ideia relacionada que tivemos por algum tempo é a capacidade de isolar regras CSS específicas para um componente React usando gulp e LESS. É como definir um className específico para cada componente e adicionar CSS específico para essa classe dentro do arquivo do componente. Isso faria muito sentido.
David Hellsing
Costumo usar nomes de classe no formato "component- {app} - {componentName}". "{app}" pode ser o nome do aplicativo ou "comum" para componentes independentes do aplicativo. por exemplo, "component-foo-todo-list" para TodoList e "component-common-light-switch-toggle". Para componentes empacotados {app} seria o nome npm. É a isso que você está se referindo?
Brigand
Sim, bem, a convenção de nomenclatura é uma coisa, mas a principal seria incluir regras CSS isoladas no mesmo arquivo js do componente.
David Hellsing
2
Isso não é verdade. Você pode definitivamente aplicar estilo personalizado para reagir aos componentes. O componente só precisa mesclar seu próprio objeto de estilo com um objeto enviado de cima, que pode vir dos dados do aplicativo. Veja os últimos slides de speakerdeck.com/vjeux/react-css-in-js, como mencionado abaixo
Flion
Claro, se você componente é um elemento único, mas dado <div><a>foo <b>bar</b></a><table>...</table></div>como você estiliza isso de adereços? Lembre-se de que a estrutura html deve permanecer um detalhe de implementação, caso contrário, você perde muitos dos benefícios que os componentes fornecem.
Brigand
18

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
alex_1948511
fonte
10

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'}}

Vivek Mehta
fonte
8

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.

viúvo
fonte
É assim que eu faço. A única desvantagem é que são dois arquivos em vez de um. Eu posso viver com isso.
Molho de
5

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;
Alireza
fonte
5

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

style={{display: this.state.isShowing ? "inherit" : "none"}}
Anupam Maurya
fonte
3

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.

dakt
fonte
3

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.

Cara
fonte
3

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.

Praveen Rao Chavan.G
fonte
3

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.

VocoJax
fonte
2

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/

0xdabbad00
fonte
Você pode explicar um pouco mais?
Dmitry Manannikov 04/04
8
Você está se referindo especificamente à unsafe-inlinepolítica. Esta política permite restrição de um elemento de estilo <style>não estilos inline aplicadas ao atributo de estilo de um elemento: <div style="">. Como a pergunta acima se refere ao atributo style, isso parece um mau conselho para evitar completamente os estilos embutidos. Além disso, reactestá aconselhando para mover todos CSS em JS: github.com/reactjs/react-future/blob/master/04%20-%20Layout/...
potench
1
@potench que apontam era realmente grande, possivelmente digno de sua própria resposta
eye_mew
6
Infelizmente, a resposta de @eye_mew e @ Sam-Rad - @potench não está correta. O CSP unsafe-inlinedesabilita todas as formas de estilos embutidos, incluindo o atributo style. Você pode usar programaticamente as APIs de estilo em um elemento via JS (por exemplo elem.style.color = 'blue';), mas não pode definir o atributo style em um elemento (assim como 'unsafe-inline'na diretiva script-src não permite tags de script embutidas, mas também onclickatributos e amigos.)
Alex Sexton
2
Há mais informações da equipe do Facebook sobre como os estilos são aplicados em relação ao CSP no React v15 github.com/facebook/react/issues/5878 . Vale a pena ler
Mark Lundin
2

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?

  1. 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?

  1. 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>
)
Ben Carp
fonte
2

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>;
  }
}
Jeffrey Lanters
fonte
1

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;
ABHIJEET KHIRE
fonte
Você poderia adicionar mais informações sobre como e por que esse código fornece uma resposta à pergunta do OP? Obrigado!
deHaar
1

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.
SamsonTheBrave
fonte
0

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.

Shivang Gupta
fonte