added support for inline styles

example/src/app.js

@@ -23,6 +23,18 @@ var App = React.createClass({ // eslint-disable-line
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           onChange={this.onChange}
+          style={{
+            'input': {
+              'borderColor': '#000'
+            },
+            'suggests': {
+              'borderColor': '#000'
+            },
+            'suggestItem': {
+              'borderColor': '#000',
+              'borderWidth': 1
+            }
+          }}
           onSuggestSelect={this.onSuggestSelect}
           location={new google.maps.LatLng(53.558572, 9.9278215)}
           radius="20" />

src/Geosuggest.jsx

@@ -322,11 +322,14 @@ class Geosuggest extends React.Component {
         onChange={this.onInputChange.bind(this)}
         onFocus={this.onInputFocus.bind(this)}
         onBlur={this.onInputBlur.bind(this)}
+        style={this.props.style.input}
         onNext={() => this.activateSuggest('next')}
         onPrev={() => this.activateSuggest('prev')}
         onSelect={() => this.selectSuggest(this.state.activeSuggest)}
         onEscape={this.hideSuggests.bind(this)} {...attributes} />,
       suggestionsList = <SuggestList isHidden={this.state.isSuggestsHidden}
+        style={this.props.style.suggests}
+        suggestItemStyle={this.props.style.suggestItem}
         suggests={this.state.suggests}
         activeSuggest={this.state.activeSuggest}
         onSuggestMouseDown={() => this.setState({ignoreBlur: true})}

src/defaults.js

@@ -21,5 +21,10 @@ export default {
   onChange: () => {},
   skipSuggest: () => {},
   getSuggestLabel: suggest => suggest.description,
-  autoActivateFirstSuggest: false
+  autoActivateFirstSuggest: false,
+  style: {
+    'input': {},
+    'suggests': {},
+    'suggestItem': {}
+  }
 };

src/input.jsx

@@ -69,6 +69,7 @@ class Input extends React.Component {
       autoComplete='off'
       {...attributes}
       value={this.props.value}
+      style={this.props.style}
       onKeyDown={this.onInputKeyDown.bind(this)}
       onChange={this.onChange.bind(this)}
       onFocus={this.props.onFocus.bind(this)}

src/prop-types.js

@@ -25,5 +25,6 @@ export default {
   onChange: React.PropTypes.func,
   skipSuggest: React.PropTypes.func,
   getSuggestLabel: React.PropTypes.func,
-  autoActivateFirstSuggest: React.PropTypes.bool
+  autoActivateFirstSuggest: React.PropTypes.bool,
+  style: React.PropTypes.object
 };

src/suggest-item.jsx

@@ -12,7 +12,8 @@ export default ({
   suggest = {},
   onMouseDown = () => {},
   onMouseOut = () => {},
-  onSelect = () => {}
+  onSelect = () => {},
+  style = {}
 }) => {
   const classes = classnames(
     'geosuggest-item',
@@ -21,6 +22,7 @@ export default ({
   );
 
   return <li className={classes}
+    style={style}
     onMouseDown={onMouseDown}
     onMouseOut={onMouseOut}
     onClick={event => {

src/suggest-list.jsx

@@ -13,21 +13,23 @@ export default ({
   activeSuggest,
   onSuggestMouseDown = () => {},
   onSuggestMouseOut = () => {},
-  onSuggestSelect = () => {}
+  onSuggestSelect = () => {},
+  style = {},
+  suggestItemStyle = {}
 }) => {
   const classes = classnames(
     'geosuggest__suggests',
     {'geosuggest__suggests--hidden': isHidden}
   );
-
-  return <ul className={classes}>
+  return <ul className={classes} style={style}>
     {suggests.map(suggest => {
       const isActive = activeSuggest &&
         suggest.placeId === activeSuggest.placeId;
 
       return <SuggestItem key={suggest.placeId}
         className={suggest.className}
         suggest={suggest}
+        style={suggestItemStyle}
         isActive={isActive}
         onMouseDown={onSuggestMouseDown}
         onMouseOut={onSuggestMouseOut}