Novo repositório não importa arquivos CSS

VTEX in your native language 🌎 Português
4

Fala mister! Tudo joia?

Para carregar o CSS Handles, basicamente

1. Carregue a dependencia necessária no manifest.json

  "dependencies": {
    "vtex.css-handles": "0.x"
  },

2. Importe o hook useCssHandles para o componente

import {useCssHandles} from 'vtex.css-handles'

3. Defina os handles necessários

const CSS_HANDLES: string[] = ['headline']
const handles = useCssHandles(CSS_HANDLES)

Observação: como o useCssHandles é um hook, precisa ser chamado dentro do corpo da função do componente, senão o app link tudo normal, mas não funcionará gerará um erro no console.

4. Por último aplique o CSS handle para os elementos desejados:

  return <div className={`${handles.headline}`}>
    Hey, {name}
  </div>

Código final:

import React from 'react'
import {useCssHandles} from 'vtex.css-handles'


type Props = {
  name: string
}

function Greeting({ name }: Props) {

  const CSS_HANDLES: string[] = ['headline']
  const handles = useCssHandles(CSS_HANDLES)

  return <div className={`${handles.headline}`}>
    Hey, {name}
  </div>
}

export default Greeting

Testei aqui e funcionou beleza :slight_smile:

1 Like