Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Props Responsivas

Como eu poderia criar um componente utilizando props de maneira responsiva. Por exemplo, um componente de botão: Que em telas desktop teria uma largura x e em mobile uma largura y;

Mas esse mesmo botão tem muita larguras diferentes no decorrer do projeto (Todos os estilos se repetem, porém em um lugar ele tem 100px, em outro lugar ele tem 200px, em outro 50px...) Eu criei um componente para ele onde eu passo width e height como propriedade e quando preciso chama-lo no componente passo elas:

<CustomButton width="100" height="200" >

Funciona perfeitamente como eu quero, mas ai eu me perdi na parte de tornar isso responsivo, já que o mesmo componente teria outra width e outra largura em telas menores, e como não estou passando essas medidas pelo css eu não soube como fazer com medias query.

Eu encontrei na internet " Styled Components" mas eu eu estou usando module.css em meus componentes nesse projeto, e gostaria de saber como trabalhar com um componente que recebe propriedades responsivas...

Espero ter conseguindo me expressar bem, desde já obrigado!

2 respostas
solução!

Oii, Erick! Tudo bem?

Muito interessante o seu projeto, parabéns por estar indo além!Como sugestão, você pode usar o useMediaQuery, um hook personalizado que permite verificar as condições da mídia no desenvolvimento em React.

Na documentação do Materiais UI, é possível estudar mais sobre o tema e entender como se aplica. Segue o link:

Também deixarei um artigo que compartilha como criar responsividade com o Material UI, para complementar os estudos da documentação:

Ambos podem abrir em Inglês, caso nao se sinta confortável com o idioma, clique com o botão direito do mouse em qualquer canto da página e escolha a opção "Traduzir para o português".

E é importante lembrar que é preciso adequar a sugestão para entender se ela é se encaixa com o seu contexto.

Espero que dê certo! Qualquer dúvida, compartilhe no fórum.

Bons estudos, Erick!

Obrigado Nathalia!