Tengo un div con display:flex pero quiero en tamaño móvil (en realidad en una consulta de medios especial) cambiar la pantalla para bloquear
<Col sm={8}> <div className="d-flex"> <Col md={4} xs={12} className="has-float-label p-0"> <Label>years</Label> <Select components={{ Input: CustomSelectInput }} className="react-select w-full" classNamePrefix="react-select" value={selectedDate.year} onChange={(value) => setSelectedDate({ ...selectedDate, year: value })} options={years} placeholder="" /> </Col> </div> </Col>Puede crear un enlace personalizado para eso para que pueda reutilizarlo según sea necesario, llamémoslo useScreenSize por ejemplo:
const [screenSize, setScreenSize] = useState(undefined); const handleResize = () => setScreenSize(window.innerWidth); useEffect(() => { window.addEventListener("resize", handleResize); handleResize(); return () => window.removeEventListener("resize", handleResize) }, []) return screenSize;Luego, en su(s) componente(s), podría usar el valor devuelto por este enlace para especificar qué clases desea aplicar, por ejemplo, si el ancho de la pantalla es, digamos, 600 px (o el punto de interrupción en el que realmente desea cambiar sus clases ), entonces puede aplicar su clase en función de eso.
Avísame si eso ayuda.