Estoy creando una aplicación web usando React , MUI y la Google Maps API para React ( @react-google-maps/api ). Vea el código que sigue.
const NodePin = (props) => { const [infoOpen, setInfoOpen] = useState(false); return ( <Marker position={{lat: pins[props.pin].lat, lng: pins[props.pin].lng}} onClick={() => setInfoOpen(true)} label={{ text: `${pins[props.pin].name}`, fontWeight: '600', //color: "#F75C03" strokeWeight: 1, }} options={{ icon: { url: props.pinsSelected[props.pin] ? mapPin.node.on : mapPin.node.off, scaledSize: { width: 40, height: 40 }, labelOrigin: { x: 20, y: 52} } }} > {infoOpen && ( <InfoWindow onCloseClick={() => setInfoOpen(false)} > <p>{pins[props.pin].name}</p> </InfoWindow> )} </Marker> ); } Me gustaría saber si es posible usar un componente React + MUI dentro de la <InfoWindow> de un componente <Marker> . En realidad, me gustaría insertar un <Button> dentro de la <InfoWindow> para cambiar el estado del componente.
¡Sí, es posible! :-) Simplemente inserte la etiqueta <div> dentro de <InfoWindow> . En este caso, mi código debería verse así.
<InfoWindow onCloseClick={() => setInfoOpen(false)} > <div> <p>{pins[props.pin].name}</p> <Stack direction="row" spacing={1} alignItems="center"> <Typography>Seleção</Typography> <MaterialUISwitch checked={checked} onChange={()=>setChecked(!checked)} /> </Stack> </div> </InfoWindow>