Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I adding style to react autocomplete in react js

Tags:

reactjs

here is my code.Let me advice to style autocomplete component

 <ReactAutocomplete

 items={obj}
 shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item) =>
<div
key={item.id}>
{item.label}
</div>}
value={this.state.value}
onChange={e => this.setState({ value: e.target.value })}
  onSelect={value => this.setState({ value })}
 />
like image 702
Gu Gue Avatar asked Nov 23 '17 09:11

Gu Gue


People also ask

How do you add an autocomplete in React?

To create an autocomplete component in React, use the react-autocomplete library. The react-autocomplete module provides properties, methods, and events that can trigger an ajax request on typing, which will fetch the list items and render them inside the render menu.

Can you style a React component?

There are about eight different ways to styling React Js components, there names and explanations of some of them are mentioned below. Example 1: This example illustrates how to use inline styling to style react components. index.

Can we use style tag in React?

There are almost endless ways to style a component in React, but using the HTML style element is one of the most creative and unusual. This approach allows you to use raw CSS while reducing your styled component definition to just one file.


1 Answers

Try something like:

  <ReactAutocomplete   
                        ....
                            inputProps={{ style: { width: '100%',height: '100px'}, placeholder: 'test'}}  
                            wrapperStyle={{ width:  '100%'   }}
            />
like image 101
Black.Jack Avatar answered Oct 06 '22 17:10

Black.Jack