Dúvida/Problema com CSS Handles

VTEX in your native language 🌎 Português
, ,
1

Olá pessoal.

Estou com uma dúvida/problema na utilização do CSS Handles. Montei um componente em um Store theme base, dentro do componente faço a utilização do handle conforme disponibilizado na documentação da VTEX:

image
image1283×928 64.8 KB

Porém estou enfrentando um problema durante o carregamento do meu componente, pois o CSS parece que é removido e inserido novamente, assim fazendo com que o componente salte e tenha uma quebra visual. Analisando o network, entendi que ele remove no início do carregamento dos meus styles e insere novamente quando finaliza o domcontentload, alguém já passou por isso?

image
image1920×1018 296 KB

image
image1912×920 117 KB

Ou possui alguma outra forma mais recomendável de utilizar o CSS dentro de apps personalizados?

1 Like
2

Opa @guijsposito tranquilo? Eu estou “enferrujado” com o desenvolvimento, mas você tentou usar o data-css-handle?

Uma possível solução para corrigir o problema de remoção e inserção do CSS é usar a propriedade data-css-handles no seu componente. Isso informa ao VTEX IO que os handles CSS devem ser carregados e mantidos no DOM.

Para usar CSS em apps personalizados, sugiro algumas dicas:

  • Usar um pré-processador de CSS: Pré-processadores como Sass ou Less permitem que você escreva CSS mais modular e reutilizável. Você pode então compilar o CSS pré-processado em CSS normal antes de adicioná-lo ao seu aplicativo.
  • Usar um gerenciador de pacotes: Gerenciadores de pacotes como o npm ou Yarn permitem que você gerencie dependências de terceiros, incluindo bibliotecas CSS. Você pode instalar bibliotecas CSS e importá-las em seu aplicativo.

Observação: outra coisa que pode estar acontecendo é conflito do seu CSS com o do tema. Verifique se não há conflitos entre os seus estilos CSS e o principal do Tema.

Veja se estas informações podem ajudar de certa forma.

Abs,
Estevão.

1 Like
3

Olá @estevao_santos valeu pelo retorno.

Estou no início da minha caminhada com vtex io. Você teria algum exemplo da utilização do data-css-handle?

Já costumo utilizar o Sass, obrigado pelas recomendações. Quanto ao CSS do tema, estou utilizando um store-theme do 0, então creio que o data-css poderia estar me ajudando caso se mantenha no DOM.

1 Like
4

Opa @guijsposito tranquilo.

Veja um exemplo:

import React from 'react';

const MyComponent = () => {
  return (
    <div data-css-handles="my-component-styles">
      {/* Conteúdo do componente */}
    </div>
  );
};

export default MyComponent;

Lembre-se de substituir pelas suas funções e variáveis.

Espero que ajude.

Abs,
Estevão.

1 Like