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

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

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

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>}
    />
  );
};

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;