Como fazer um input search estilizado igual o do Material UI

Front-end CSS
,
#1

Boa tarde Galera!
Gostaria de fazer um input igual esse aqui da foto:
Quando pesquisa ele aparece o item pesquisado, eu preciso estilizar a caixinha que aparece quando pesquisa, alguém tem algum exemplo de como estilizar ela. Desde já eu fico agradecida <3

Meu código

 <Autocomplete
                    freeSolo
                    disableClearable
                    options={this.state.top100Films.map((option) => option.title)}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        placeholder="Buscar..."
                        margin="normal"
                        variant="outlined"
                        value={this.state.search}
                        onChange={(e) => this.setState({ search: e.target.value })}
                        className={classes.inputRoot}
                        InputProps={{
                          ...params.InputProps, type: 'search', className: classes.textField,
                          startAdornment: (
                            <InputAdornment className={classes.iconInput}>
                              {this.state.search === '' &&
                                <Search />
                              }
                            </InputAdornment>
                          )
                        }}
                      />
                    )}
                  />

Css

        width: '280px',
        height: '50px',
        color: '#FFF',
        background: "#003461",
        margin: '-15px 20px',

Como está
image

Como quero deixar

image
image.png741×707 54.3 KB

#2

Vc precisa customizar esse render q aparece quando vc digita.

<Autocomplete
          open
          onClose={handleClose}
          value={pendingValue}
          onChange={(event, newValue) => {
            setPendingValue(newValue);
          }}
          renderOption={(option, { selected }) => (
            <React.Fragment>
              <div> 
                aqui vc faz a customização
              </div>
            </React.Fragment>
          )}
.........

Tem um exemplo disso la no final. Procura no lado direito por github picker

1 curtida