How can I add a switch to leaflet map react?

Question

There is a problem with customizing a button and put it at top right of a Map Container. here is my reactjs code for Map box.

    <MapContainer style={{width:"32vw", height:"32vh",
    alignItems:"center", alignContent:"center",
    justifyContent:"center", justifyItems:"center", display:"flex"}} center={[0, 0]}
             zoom={13} scrollWheelZoom={true} zoomControl={false}>
   <TileLayer
       attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   />
   {renderMapBox(announcement.anc_status, announcement.volunteers)}
</MapContainer>

how can I add this switch button to the top right of the map box? (like zoomControl that is usable in map)

{announcement.anc_status === "P" && announcement.volunteers.length > 1 && <AllVolunteerSwitch onChange={viewAllHost}/>}

Answer 1

Add className to your Switch component:

<AllVolunteerSwitch onChange={viewAllHost} className="switch" />

Add the following css to your css file:

.switch {
  position: absolute;
  z-index: 999;
  right: 10px;
  top: 10px;
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 15px;
  letter-spacing: 2px;
  width: 16%;
}