const Searchbar = styled.input` width: auto; padding: 0.5rem; border: 1px solid #ccc; border-radius: 0; outline: none; font-size: 1rem; margin: 8px; border-radius: 8px; position: fixed; top: 64px; left: 0; right: 0; z-index: 1; &:focus { outline: none; border-color: #333; } &::placeholder { color: #999; } `; return ( <div style={{ position: 'relative' }}> <Searchbar onChange={(e) => { const term = e.target.value; State.update({ term }); }} placeholder="Search for events" /> </div> );