Edição de estilo das estruturas CSS-in-JS

Na guia Estilos , você pode copiar declarações para uma regra de estilo formatada para JavaScript e pronta para colar em um arquivo JavaScript. Isso inclui regras de estilo que foram definidas por chamadas de função CSS-in-JS. Você também pode editar regras de estilo que foram definidas inicialmente por uma chamada de função CSS-in-JS.

Copiar declarações de regra de estilo para colá-las com sintaxe JavaScript

No painel Estilos , você pode copiar declarações para uma regra de estilo formatada para JavaScript e pronta para colar em um arquivo JavaScript.

Ao usar bibliotecas CSS-in-JS, você pode copiar declarações CSS (uma propriedade e um valor CSS) para que elas sejam formatadas automaticamente para JavaScript. Você não precisa editar manualmente o CSS copiado para corresponder à sintaxe do JavaScript. Você pode copiar uma única declaração CSS ou todas as declarações em uma regra de estilo e colá-las diretamente em um arquivo JavaScript sem ter problemas de sintaxe.

Para copiar uma regra de estilo como JavaScript:

1. No DevTools, abra a ferramenta Elementos e clique na guia Estilos .

2. Clique com o botão direito do mouse em uma declaração em uma regra de estilo e selecione Copiar declaração como JS ou Copiar todas as declarações como JS.

3. Cole o CSS copiado em um arquivo JavaScript no editor de texto, como o Visual Studio Code. Por exemplo: '--more-link': 'lime'.

   

Para saber mais sobre como exibir e alterar o CSS, consulte Referência de recursos do CSS.

Editar regras de estilo que foram inicialmente definidas por uma função CSSOM

O painel Estilos dá suporte à edição de estilos que foram criados com as APIs CSS Object Model (CSSOM). Muitas estruturas e bibliotecas CSS-in-JS usam as APIs de modelo de objeto CSS internamente para construir estilos.

Você pode editar estilos que foram adicionados em JavaScript usando a interface, que é uma maneira de criar e distribuir estilos reutilizáveis ao usar o CSSStyleSheetShadow DOM. Consulte A CSSStyleSheet Interface no CSS Object Model (CSSOM).

Exemplo

Neste código de exemplo, as regras de estilo são definidas inicialmente chamando uma função CSS Object Model (CSSOM) e, em seguida, as regras de estilo são editadas usando o painel Estilos . O CSSStyleSheet objeto contém as APIs CSSOM, como insertRule(). Os h1 estilos que foram adicionados inicialmente por uma CSSStyleSheet função são editáveis no painel Estilos .

//Add CSS-in-JS button

function addStyle() {
  const sheet = new CSSStyleSheet();
  sheet.insertRule(`h1 {
    background: pink;
    text-transform: uppercase;
  }`);
  document.adoptedStyleSheets = [sheet];
}

Este exemplo demonstra a background alteração da propriedade dos h1 estilos adicionados pela função insertRule()CSS Object Model. A background cor é definida inicialmente chamando uma função CSS Object Model e, em seguida, pode ser alterada usando pinklightblue o painel Estilos .

Experimente esse recurso com um exemplo que usa CSS-in-JS.

O que é CSS-in-JS?

Esta seção é um trecho da postagem do blog Suporte a CSS-in-JS no DevTools.

Aqui está o que queremos dizer com CSS-in-JS e como ele é diferente do CSS normal. A definição de CSS-in-JS é um tanto vaga. Em um sentido amplo, é uma abordagem para gerenciar código CSS usando JavaScript. Por exemplo, isso pode significar que o conteúdo CSS é definido usando JavaScript e a saída CSS final é gerada instantaneamente pelo aplicativo.

No contexto do DevTools, CSS-in-JS significa que o conteúdo CSS é injetado na página pelas APIs do modelo de objeto CSS. O CSS regular é injetado usando <style> elementos ou <link> e possui uma fonte estática (como um nó DOM ou um recurso de rede). Por outro lado, o CSS-in-JS geralmente não tem uma fonte estática.

Um caso especial aqui é que o conteúdo de um <style> elemento pode ser atualizado usando a API CSS Object Model, fazendo com que a origem fique fora de sincronia com a folha de estilo CSS real.

Se você usar qualquer biblioteca CSS-in-JS (como styled-component, Emotions ou JSS), a biblioteca poderá injetar estilos usando APIs de modelo de objeto CSS nos bastidores, dependendo do modo de desenvolvimento e do navegador.

Vejamos alguns exemplos de como você pode injetar uma folha de estilo usando a API CSS Object Model, semelhante à abordagem usada por algumas bibliotecas CSS-in-JS.

// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');

Você também pode criar uma folha de estilo completamente nova:

// Create a completely new stylesheet
const sheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');

// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

Suporte a CSS no DevTools

No DevTools, o recurso mais comumente usado ao lidar com CSS é o painel Estilos . No painel Estilos , você pode ver quais regras CSS-in-JS se aplicam a um elemento específico. Você também pode editar as regras CSS-in-JS e ver as alterações na página em tempo real.

O painel Estilos suporta regras CSS que você pode modificar usando as APIs de modelo de objeto CSS. Os estilos CSS-in-JS às vezes são descritos como construídos, para indicar que esses estilos foram construídos usando APIs da Web.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.