网站导航栏添加搜索栏及material-ui@next(v1.x)依赖安装咨询

嘿，我之前在Material-UI v1.x项目里做过类似的导航栏搜索功能，给你梳理下需要的依赖情况：

基础搜索栏（仅用Material-UI原生组件） #

其实大部分核心组件Material-UI v1.x本身就提供了，你只需要确保以下依赖已安装：

• @material-ui/core@v1.x：你已经在用material-ui@next（也就是v1.x），这个肯定已经装了，它包含AppBar、Toolbar、TextField这些基础组件，用来搭建搜索栏的结构。
• @material-ui/icons@v1.x：如果需要在搜索栏旁边加个放大镜图标，就得装这个图标库。安装命令：

  npm install @material-ui/icons@next
  # 或者用yarn
  yarn add @material-ui/icons@next
  

进阶搜索功能（可选） #

如果你的搜索栏需要自动补全、搜索建议这类复杂交互，可能需要额外依赖：

• @material-ui/lab@v1.x：这个包包含Material-UI当时的实验性组件，其中的Autocomplete组件可以用来实现搜索自动补全功能。安装命令：

  npm install @material-ui/lab@next
  yarn add @material-ui/lab@next
  

• lodash.debounce：如果要优化搜索输入的防抖（避免每次输入都触发请求），可以装这个工具库，用来限制搜索请求的触发频率：

  npm install lodash.debounce
  yarn add lodash.debounce
  

小提示：基础搜索栏完全可以用现有组件快速搭建——比如在Toolbar里嵌套一个TextField（设置type="search"，调整样式适配导航栏），再搭配一个带搜索图标的IconButton就搞定了，不需要额外装其他依赖~

内容的提问来源于stack exchange，提问作者alok kumar