import React from 'react'; import { makeStyles } from '@material-ui/styles'; import { TextField } from '@material-ui/core'; const useStyles = makeStyles((theme) => ({ wrapForm: { width: '100%', borderTop: '2px solid black', }, field: { width: '100%', color: theme.palette.primary.main, wordWrap: 'break-word', }, })); const SearchInbox = ({ setSearch }) => { const { wrapForm, field } = useStyles(); return ( <form className={wrapForm} noValidate autoComplete="off"> <TextField id="outlined-search" label="Search by name or ID ..." type="search" variant="filled" className={field} onChange={(e) => setSearch(e.target.value)} /> </form> ); }; export default SearchInbox;