Edição de estilo para estruturas CSS-in-JS
Na guia Estilos , você pode copiar declarações para uma regra de estilo de uma forma formatada para JavaScript e pronta para colar em um arquivo JavaScript. Isso inclui regras de estilo definidas por chamadas de função CSS-in-JS. Você também pode editar regras de estilo que foram inicialmente definidas por uma chamada de função CSS em JS.
Copiar declarações de regra de estilo para colá-las com a sintaxe JavaScript
No painel Estilos , você pode copiar declarações para uma regra de estilo de uma forma 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 cole-as diretamente em um arquivo JavaScript sem ter problemas de sintaxe.
Para copiar uma regra de estilo como JavaScript:
Em DevTools, abra a ferramenta Elementos e clique na guia Estilos .
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.
Cole o CSS copiado em um arquivo JavaScript no editor de texto, como Visual Studio Code. Por exemplo:
'--more-link': 'lime'.
Para saber mais sobre como exibir e alterar o CSS, confira Referência de recursos do CSS.
Regras de estilo de edição que foram inicialmente definidas por uma função CSSOM
O painel Estilos dá suporte a estilos de edição criados com as APIs CSSOM (Modelo de Objeto CSS). Muitas estruturas e bibliotecas CSS-in-JS usam as APIs do Modelo de Objeto CSS sob o capô para construir estilos.
Você pode editar estilos que foram adicionados no JavaScript usando a CSSStyleSheet interface, que é uma maneira de criar e distribuir estilos reutilizáveis ao usar o SHADOW DOM. Consulte A CSSStyleSheet interface no CSS Object Model (CSSOM).
Exemplo
Neste código de exemplo, as regras de estilo são inicialmente definidas 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 inicialmente adicionados 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 alteração da background propriedade dos h1 estilos adicionados pela função insertRule()CSS Object Model . A background cor é inicialmente definida chamando uma função CSS Object Model e, em seguida, pode ser alterada de pink para lightblue usando o painel Estilos .
Dê a esse recurso uma tentativa com um exemplo que usa CSS-in-JS.
O que é CSS-in-JS?
Esta seção é um trecho da postagem do blog de suporte CSS-in-JS em DevTools.
Aqui está o que queremos dizer com CSS-in-JS e como é diferente do CSS regular. A definição de CSS-in-JS é um pouco vaga. Em um sentido amplo, é uma abordagem para gerenciar o código CSS usando JavaScript. Por exemplo, isso pode significar que o conteúdo do CSS é definido usando JavaScript e a saída final do CSS é gerada em tempo real pelo aplicativo.
No contexto de DevTools, CSS-in-JS significa que o conteúdo do CSS é injetado na página pelas APIs do Modelo de Objeto CSS. O CSS regular é injetado usando <style> ou <link> elementos e tem 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 do Modelo de Objeto CSS, fazendo com que a origem fique fora de sincronização com a planilha de estilos CSS real.
Se você usar qualquer biblioteca CSS-in-JS (como o componente estilizado, Emotion ou JSS), a biblioteca poderá injetar estilos usando APIs do Modelo de Objeto CSS sob o capô, dependendo do modo de desenvolvimento e do navegador.
Vamos examinar alguns exemplos de como você pode injetar uma planilha de estilos usando a API do Modelo de Objeto CSS, 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 planilha de estilos 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 do CSS em DevTools
Em DevTools, o recurso mais usado ao lidar com o CSS é o painel Estilos . No painel Estilos , você pode exibir quais regras CSS-in-JS se aplicam a um determinado elemento. Você também pode editar as regras do CSS no JS e ver as alterações na página em tempo real.
O painel Estilos dá suporte a regras CSS que você pode modificar usando as APIs do 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 Web.
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Alex Rudenko (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.