Using with material-ui?

[ubilabs]

Using with material-ui?

[igorrmotta]

@ro-ka The problem of styling the component is that everytime Material Design changes, we have to update our CSS.

[ro-ka]

Never tried, we’re not using this.

What would be needed to make it compatible?

[ro-ka]

As you can style the component as you like, you can adapt Material Design.

[hyzhak]

@CezarLuiz0 hi! Have you tried to adapt style of the component to Material Design?

[dunatron]

I know this isnt exactly what you are after but I suggest styles components.
I have changed 1 thing to show you that you can get the MD theme variables into here

import Geosuggest from 'react-geosuggest';
import styled from 'styled-components';

// look for p => p.theme.palette.secondary.main 

const StylesGeoSuggest = styled(Geosuggest)`
  .geosuggest {
    font-size: 18px;
    font-size: 1rem;
    position: relative;
    width: 50%;
    margin: 1em auto;
    text-align: left;
  }
  .geosuggest__input {
    width: 100%;
    border: 2px solid red;
    box-shadow: 0 0 1px #3d464d;
    padding: 0.5em 1em;
    -webkit-transition: border 0.2s, box-shadow 0.2s;
    transition: border 0.2s, box-shadow 0.2s;
  }
  .geosuggest__input:focus {
    border-color: #267dc0;
    box-shadow: 0 0 0 transparent;
  }
  .geosuggest__suggests {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 25em;
    padding: 0;
    margin-top: -1px;
    /* background: #fff; */
    background: ${p => p.theme.palette.secondary.main};
    border: 2px solid #267dc0;
    border-top-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    z-index: 5;
    -webkit-transition: max-height 0.2s, border 0.2s;
    transition: max-height 0.2s, border 0.2s;
  }
  .geosuggest__suggests--hidden {
    max-height: 0;
    overflow: hidden;
    border-width: 0;
  }

  /**
 * A geosuggest item
 */
  .geosuggest__item {
    font-size: 18px;
    font-size: 1rem;
    padding: 0.5em 0.65em;
    cursor: pointer;
  }
  .geosuggest__item:hover,
  .geosuggest__item:focus {
    background: #f5f5f5;
  }
  .geosuggest__item--active {
    background: #267dc0;
    color: #fff;
  }
  .geosuggest__item--active:hover,
  .geosuggest__item--active:focus {
    background: #ccc;
  }
  .geosuggest__item__matched-text {
    font-weight: bold;
  }
`;

const TheCOmponent = () => {
    return <StylesGeoSuggest
        // ref={el => (_geoSuggest = el)}
        fixtures={_getFixtures()}
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={onChange}
        onSuggestSelect={suggestion => _suggest(suggestion)}
        onSuggestNoResults={onSuggestNoResults}
        location={new google.maps.LatLng(-46.1326615, 168.89592100000004)}
        types={state.type === 'ALL' ? null : state.types}
        radius="20"
        country={state.country === 'ALL' ? null : state.country}
      />
}