Estilização React Slick - Vtex IO

Boa tarde, pessoal.

Seguindo a documentação, criei um app e nele tenho um React Slick, porém pra estilizá-lo, só estamos conseguindo usando Styled Component.

Alguém conseguem entender o motivo dele não aceitar da forma abaixo?

Aqui está a criação do App:

Aqui a chamada dele no store theme:
image

Nessa chamada de teste, consigo estilizar somente o slider, pois está com estilo componentizado, porém o que está abaixo dele, como o slick track, não é afetado pelo estilo.

Eu reparei que ele gera o CSS com a classe cantaofs-appelasusam-0-x-slick-list porém o slick-list do componentenão recebe a classe .cantaofs-appelasusam-0-x-slick-list, por isso não estiliza.
Já procurei como tentar ignorar o arquivo css pra ele não entrar no build do handles, mas não consegui fazer de uma forma que funcionasse.

Olá @raphaelfelix!

Então, estive realizando uma busca por casos semelhante e encontrei outra ocorrência de problema de estilização do componente externo react-slick aqui na comunidade VTEX: React Slick. Neste tópico, foi destacado que o problema poderia ser contornado ao aplicar uma estilização global dentro do elemento a ser estilizado.

Como adendo, quero ressaltar que, caso o react-slick esteja sendo usado como complemento do app Slider, o mesmo encontra-se marcado como Deprecated. Desta forma, nós temos um app nativo VTEX que cumpre com a função de slider, o Slider Layout!

Espero ter ajudado!

Lucas Palhano Fonseca | Field Software Engineer