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!