Currently, I am working on a map with zoom in and zoom out functionalities. My main concern is how to make the red section invisible while keeping the buttons visible. This will ensure that when users search for locations on the map, their view will not be obstructed by this div.
I apologize for any language errors as English is not my primary language.
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import styled from "styled-components";
const Toolbox = styled.div`
display: flex;
justify-content: end;
width: 100%;
max-width: calc(100vw - 60px);
margin-bottom: 10px;
background-color:red
button {
margin-left: 10px;
width: 2em;
height:2em
}
`;
function App() {
return (
<Toolbox>
<button onClick={''}>+</button>
<button onClick={''}>-</button>
<button onClick={''}>x</button>
</Toolbox>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);The current appearance of the setup: