如何使用material-ui inputBase制作精选组件？

Material-UI 的 InputBase 组件是一个灵活的输入组件，可以用来创建自定义的输入框

首先，确保你已经安装了 Material-UI。如果没有，请运行以下命令来安装：

npm install @mui/material @emotion/react @emotion/styled

在你的 React 项目中，导入所需的组件和样式：

import React from 'react';
import InputBase from '@mui/material/InputBase';
import { styled } from '@emotion/react';

创建一个自定义的精选组件，继承自 InputBase，并添加你需要的功能。这里我们创建一个简单的搜索框组件：

const CustomSearchInput = (props) => {
  const searchInput = styled(InputBase)(({ theme }) => ({
    'label + &': {
      marginTop: theme.spacing(3),
    },
    'input:focus ~ .MuiOutlinedInput-notchedOutline': {
      borderColor: '#FF5722',
    },
    'input:focus': {
      outline: 'none',
    },
  }));

  return (
    <searchInput
      {...props}
      placeholder="搜索..."
      variant="outlined"
      fullWidth
      startAdornment={<span>🔍</span>}
    />
  );
};

在这个例子中，我们创建了一个带有搜索图标的搜索框。我们使用了 styled 函数来自定义 InputBase 的样式，并添加了一些额外的样式。

在你的应用中使用这个自定义组件：

import React from 'react';
import CustomSearchInput from './CustomSearchInput';

const App = () => {
  return (
    <div>
      <h1>精选组件示例</h1>
      <CustomSearchInput onChange={(e) => console.log(e.target.value)} />
    </div>
  );
};

export default App;

现在，你已经成功创建了一个使用 Material-UI InputBase 制作的精选组件。你可以根据需要进一步自定义这个组件，添加更多的功能和样式。