2
respostas

Carregar folha de estilo dinamicamente

Olá, estou tentando carregar uma folha de estilo usando interpolação em href da tag link, mas dá erro! A tag link está fora do head da aplicação

2 respostas

Boa noite, meu xará! Como vai?

O ideal nesses casos é que a folha de estilo já esteja carregada e vc aplique as classes de forma condicional de acordo com a sua necessidade.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Olá Gabriel!

Dessa forma que indicou, acredito que fica um pouco deselegante o código e caso necessite alteração dará um certo trabalho fazer alguma alteração! O meu cenário é, conforme o usuário se logar carrega um layout e um logo referente. O problema é que estou usando o Material Design na aplicação e utilizo o estilo de style.scss, quando os dados são informados no login estou buscando uma folha de estilo e colocando em uso, só que por exemplo, a cor do botão muda, mas esta visível essa troca de cor, a mudança de cor esta aparente na tela. Eu fiz esse método abaixo que coloca o novo estilo. public loadStyle(styleName: string):void { const head = this.document.getElementsByTagName('head')[0];

let themeLink = this.document.getElementById(
  'client-theme'
) as HTMLLinkElement;
if (themeLink) {
  themeLink.href = styleName;
} else {
  const style = this.document.createElement('link');
  style.id = 'client-theme';
  style.rel = 'stylesheet';
  style.href = styleName;

  head.appendChild(style);
}

}

Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software