Agora que já implementamos o countdown, que tal adicionar um pouco de customização? Nessa etapa, você irá aprender conceitos básicos a respeito de CSS handles e Tachyons para, em seguida, customizar o estilo da sua app.

CSS Handles

Os handles de CSS são utilizados para customizar os componentes da sua loja através de classes de CSS no código do tema. Todas essas configurações são definidas através da app vtex.css-handles, responsável por declarar todos os pontos de customização do seu bloco.

Definindo os nomes dos seus handles e adicionando aos seus respectivos elementos HTML, é possível entregar ao usuário do tema pontos de customização que permitam criar layouts flexíveis.

Tachyons

O Tachyons é um framework para CSS funcional. Diferentemente de outros frameworks conhecidos, como o Bootstrap, ele não apresenta componentes UI "pré-buildados". Na verdade, seu objetivo é justamente separar as regras de CSS em partes pequenas e reutilizáveis. Esse tipo de estratégia é comumente conhecido como Subatomic Design System e, caso você tenha interesse, pode encontrar uma referência neste link. Essa estratégia torna frameworks como o Tachyons muito flexíveis, escaláveis e rápidos.

Grande parte das definições de Tachyons podem ser alteradas, de forma que sua loja passe a ter um estilo mais customizado. Para isso, basta definir um arquivo JSON na pasta styles/configs; essas informações podem ser encontradas de forma mais detalhada em: Customizing styles on VTEX IO.

1. Primeiro, importe o hook useCssHandles. Para isso, volte ao Countdown.tsx e faça o import:

   
   

   _10

   // react/Countdown.tsx

   _10

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

   
   

2. Feito isso, defina em um Array todos os handles que serão necessários (neste caso, será utilizado apenas 'countdown'):

   
   

   _10

   // react/Countdown.tsx

   _10

   const CSS_HANDLES = ['countdown']

   
   

3. Após a definição do array, utilize o useCssHandles no componente Countdown para definir o handle do countdown:

   
   

   _20

   // react/Countdown.tsx

   _20

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate = DEFAULT_TARGET_DATE }) => {

   _20

   const [timeRemaining, setTime] = useState<TimeSplit>({

   _20

   hours: '00',

   _20

   minutes: '00',

   _20

   seconds: '00'

   _20

   })

   _20

   _20

   + const handles = useCssHandles(CSS_HANDLES)

   _20

   _20

   tick(targetDate, setTime)

   _20

   _20

   return (

   _20

   <div>

   _20

   <h1>

   _20

   { `${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}` }

   _20

   </h1>

   _20

   </div>

   _20

   )

   _20

   }

   
   

4. Por fim, é preciso utilizar o handle no componente a fim de ver a customização. Para isso, é necessário utilizar a prop className com as classes a serem utilizadas e as classes de Tachyons, para os estilos globais.

   
   

   _21

   // react/Countdown.tsx

   _21

   import React from 'react'

   _21

   ...

   _21

   _21

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate = DEFAULT_TARGET_DATE }) => {

   _21

   const [timeRemaining, setTime] = useState<TimeSplit>({

   _21

   hours: '00',

   _21

   minutes: '00',

   _21

   seconds: '00'

   _21

   })

   _21

   _21

   const handles = useCssHandles(CSS_HANDLES)

   _21

   _21

   tick(targetDate, setTime)

   _21

   _21

   return (

   _21

   + <div className={`${handles.countdown} c-muted-1 db tc`}>

   _21

   {`${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}`}

   _21

   </div>

   _21

   )

   _21

   }

   
   

Vamos ver o resultado?