Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Ajuda para entender sobre styles['container-outlet']}

Referente ao curso React: gerenciamento de estados globais com Redux

por Noelen Giovanna de Aquino Schorro
| 28.7k xp | 10 posts
Frontend Developer

Oii, existem parte do código onde se usa o styles, que há esses valores com -, poderiam direcionar um artigo para me ajudar a entender melhor o que é? Ou me explicar a respeito? Obrigada!

Exemplos:

            <Navbar />
            <div className={styles['container-outlet']}>
                <Outlet />
            </div>
            <Footer />
        </div>
        
        
        .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    &-outlet {
        flex: 1;
    }
}
1 resposta
solução!
por NATHALIA QUEIROZ
| 2055.1k xp | 4843 posts
Alura Scuba Team Suporte Educacional

Oii, Noelen! Tudo bem?

É normal sentir dúvidas quando estamos iniciando e aos poucos, vamos tendo mais intimidade com o tema e vai se tornando mais fácil a compreensão. E conte com a gente pra te ajudar!

Essa sintaxe é usada quando queremos acessar uma propriedade de um objeto CSS que contém hífens. No exemplo mostrado por você, o objeto CSS é styles e a propriedade que estamos acessando é 'container-outlet'.

Dentro do objeto styles, a propriedade 'container-outlet' está definida como flex: 1;.

A sintaxe é necessária pois o hífen é um caractere especial no JavaScript e não pode ser usado diretamente em um nome de propriedade. Então, para acessar essa propriedade, é usado styles['container-outlet'].

Espero ter ajudado. Qualquer dúvida, não hesite em recorrer ao fórum.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!