Search box in react-leaflet looks wrong - reactjs

Question

It looks like that when it is supposed to be a button that you press to open.
I am using react-leaflet with mapzen's leaflet-geocoder.
import { MapControl } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet-geocoder-mapzen'
export default class SearchBox extends MapControl {
componentWillMount() {
const searchBox = L.control.geocoder(<API-KEY>)
this.leafletElement = searchBox
}
}

Answer 1

I added some styling in my CSS that made the search box look somewhat better — that's my fix for now, at least.
.leaflet-touch .leaflet-bar {
background-color: white;
}
.leaflet-pelias-control, .leaflet-pelias-input {
width: 100%;
max-width: 200px;
}
.leaflet-pelias-search-icon {
display: block;
visibility: hidden;
}
.leaflet-pelias-close {
visibility: hidden;
}
.leaflet-pelias-close::after {
content:'Clear search';
visibility: visible;
display: block;
width: 100%;
padding: 5px;
top: 2px;
}
.leaflet-top, .leaflet-left {
width: 200px;
}

Answer 2

For leaflet-control-geocoder, what worked for me, was to add the following to index.css:
#import "~leaflet-control-geocoder/dist/Control.Geocoder.css";
So for leaflet-geocoder-mapzen I'm guessing (untested):
#import "~leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css";
or similar
FYI
Tilde (~) used in conjunction with webpack means that a lookup is performed against node_modules to resolve the path.
see stackoverflow explanation here