如何仅安装React Material UI的指定组件（如Autocomplete）？

可以单独使用Material UI（MUI）的特定组件，无需安装整个库，下面分两种场景说明Autocomplete的安装和使用方式：

方式一：使用官方样式的Autocomplete #

Autocomplete属于@mui/material组件库的一部分，你只需安装该包及必要依赖即可：

• 执行安装命令：

  npm install @mui/material @emotion/react @emotion/styled
  # 或使用yarn
  yarn add @mui/material @emotion/react @emotion/styled
  

• 安装完成后，直接在代码中导入Autocomplete，现代打包工具（如Webpack、Vite）的tree shaking会自动剔除未使用的组件代码，不会引入整个库：

  import Autocomplete from '@mui/material/Autocomplete';
  import TextField from '@mui/material/TextField';
  
  export default function MyAutocomplete() {
    const options = ['选项1', '选项2', '选项3'];
    return (
      <Autocomplete
        options={options}
        renderInput={(params) => <TextField {...params} label="选择内容" />}
      />
    );
  }
  

方式二：使用轻量无样式基础组件 #

如果想进一步压缩依赖体积，可以用@mui/base提供的无样式Autocomplete组件，自行定制样式：

• 安装@mui/base包：

  npm install @mui/base
  # 或使用yarn
  yarn add @mui/base
  

• 导入无样式组件并添加自定义样式：

  import { Autocomplete as BaseAutocomplete } from '@mui/base/Autocomplete';
  import { TextField } from '@mui/material';
  
  const customStyles = {
    root: {
      width: 300,
      borderRadius: 4,
      border: '1px solid #ddd',
      padding: '8px'
    }
  };
  
  export default function MyCustomAutocomplete() {
    const options = ['选项1', '选项2', '选项3'];
    return (
      <BaseAutocomplete
        options={options}
        renderInput={(params) => <TextField {...params} label="自定义选项" />}
        sx={customStyles}
      />
    );
  }
  

内容的提问来源于stack exchange，提问作者four-eyes