Как отобразить поисковый ввод с помощью фреймворка в reactjs?

Question

Я новичок в пользовательском интерфейсе материала, я хотел создать поле ввода в строке поиска с правой стороны в заголовке карты, но не смог отобразить это. ничего не отображается.

Вот код:

<Card>
  <CardHeader
    avatar={<Avatar aria-label="recipe">AJ</Avatar>}
    search={
       <TextField placeholder="Search" margin="normal" />
        // <TextField
        //   id="standard-search"
        //   label="Search field"
        //   type="search"
        // />
        // <IconButton>
        // <SearchIcon/>
        // </IconButton>
      }
      action={
        <IconButton aria-label="settings">
          <MoreVertIcon />
        </IconButton>
      }
  />
</Card>

Кто-нибудь может помочь в этом запросе?

Answer 1

Вместо этого используйте реквизиты title , см. api-заголовок карты

type: node
Содержимое заголовка карты.

<CardHeader
  avatar={<Avatar aria-label="recipe">AJ</Avatar>}
  title={
    <TextField
      placeholder="Search"
      margin="normal"
      style={{ width: "100%" }}
    />
  }
  action={
    <IconButton aria-label="settings">
      <MoreVertIcon />
    </IconButton>
  }
/>