reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Styling of Input element #214

Closed dittmarconsulting closed 7 years ago

dittmarconsulting commented 7 years ago

I love you work. The Autocomplete works like a treat.

Although one can style the wrapper DIV with wrapperStyle={} but is there a way to style the <input/> element as well? I would like to add borderRadius. This that possible or do I need to compile my own react-autocomplete component where I hardcode these styles?

Since many of us are using Bootstrap with React it would be great if one could attach attributes like className="form-control" or placeholder="US STATES". This way your component would be styled like any other form component.

class App extends React.Component {
  render() {
    return(
      <form>
        <div className="form-group">
          <Autocomplete className="form-control" placeholder="US STATES"  ... />
        </div>
      </form>
    )
  }
}
CMTegner commented 7 years ago

Hi! There are three individual parts of Autocomplete which can be styled separately:

  1. The wrapper which surrounds the <input> and the dropdown menu (styled with wrapperProps={{ style: { ... } }})
  2. The input element itself (styled with inputProps={{ style: { ... } }})
  3. The dropdown menu (styled with menuStyle={ ... }, or alternatively using a custom implementation via renderMenu={fn})

Please consult the API documentation for more info: https://github.com/reactjs/react-autocomplete#api