Edição de estilos para estruturas CSS-in-JS
No separador Estilos , pode copiar declarações para uma regra de estilo de uma forma formatada para JavaScript e pronta para colar num ficheiro JavaScript. Isto inclui regras de estilo que foram definidas por chamadas de função CSS-in-JS. Também pode editar regras de estilo que foram inicialmente definidas por uma chamada de função CSS-in-JS.
Copiar declarações de regras de estilo para colá-las com sintaxe JavaScript
No painel Estilos , pode copiar declarações para uma regra de estilo de uma forma formatada para JavaScript e pronta para colar num ficheiro JavaScript.
Ao utilizar bibliotecas CSS-in-JS, pode copiar declarações CSS (uma propriedade e valor CSS) para que sejam automaticamente formatadas para JavaScript. Não tem de editar manualmente o CSS copiado para corresponder à sintaxe do JavaScript. Pode copiar uma única declaração CSS ou todas as declarações numa regra de estilo e, em seguida, colá-las diretamente num ficheiro JavaScript sem ter problemas de sintaxe.
Para copiar uma regra de estilo como JavaScript:
Em DevTools, abra a ferramenta Elementos e, em seguida, clique no separador Estilos .
Clique com o botão direito do rato numa declaração numa regra de estilo e, em seguida, selecione Copiar declaração como JS ou Copiar todas as declarações como JS.
Cole o CSS copiado num ficheiro JavaScript no editor de texto, como Visual Studio Code. Por exemplo:
'--more-link': 'lime'.
Para saber mais sobre como ver e alterar o CSS, veja Referência de funcionalidades do CSS.
Editar regras de estilo que foram inicialmente definidas por uma função CSSOM
O painel Estilos suporta estilos de edição criados com as APIs CSS Object Model (CSSOM ). Muitas arquiteturas e bibliotecas CSS-in-JS utilizam as APIs de Modelo de Objeto CSS nos bastidores para construir estilos.
Pode editar estilos que foram adicionados em JavaScript através da CSSStyleSheet interface, que é uma forma de criar e distribuir estilos reutilizáveis ao utilizar o DOM sombra. Veja A CSSStyleSheet Interface no Modelo de Objeto CSS (CSSOM).
Exemplo
Neste código de exemplo, as regras de estilo são inicialmente definidas ao chamar uma função CSS Object Model (CSSOM) e, em seguida, as regras de estilo são editadas com 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 que são adicionados pela função insertRule()CSS Object Model . Inicialmente background , a cor é definida ao chamar uma função de Modelo de Objeto CSS e, em seguida, pode ser alterada de pink para lightblue através do painel Estilos .
Experimente esta funcionalidade com um exemplo que utilize CSS-in-JS.
O que é o CSS-in-JS?
Esta secção é um excerto da publicação de blogue suporte CSS-in-JS no DevTools.
Eis o que queremos dizer com CSS-in-JS e como é diferente do CSS normal. A definição de CSS-in-JS é um pouco vaga. Num sentido geral, é uma abordagem para gerir código CSS com JavaScript. Por exemplo, pode significar que o conteúdo CSS é definido com JavaScript e a saída CSS final é gerada de imediato pela aplicação.
No contexto de DevTools, CSS-in-JS significa que o conteúdo CSS é injetado na página pelas APIs de Modelo de Objeto CSS. O CSS normal é injetado com <style> ou <link> elementos e tem uma origem estática (como um nó DOM ou um recurso de rede). Por outro lado, o CSS-in-JS muitas vezes não tem uma origem estática.
Um caso especial aqui é que o conteúdo de um <style> elemento pode ser atualizado com a API de Modelo de Objeto CSS, fazendo com que a origem fique dessincronizada com a folha de estilos CSS real.
Se utilizar qualquer biblioteca CSS-in-JS (por exemplo, componente de estilo, Emoções ou JSS), a biblioteca poderá injetar estilos através de APIs de Modelo de Objeto CSS nos bastidores, consoante o modo de desenvolvimento e o browser.
Vejamos alguns exemplos de como pode injetar uma folha de estilos com a API de Modelo de Objeto CSS, semelhante à abordagem utilizada 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; }');
Também pode criar uma folha 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 CSS no DevTools
No DevTools, a funcionalidade mais utilizada ao lidar com CSS é o painel Estilos . No painel Estilos , pode ver o que as regras CSS em JS se aplicam a um elemento específico. 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 pode modificar com as APIs de Modelo de Objeto CSS. Por vezes, os estilos CSS-in-JS são descritos como construídos, para indicar que estes estilos foram construídos através de APIs Web.
Observação
Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Alex Rudenko.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.