我想在muiv5自動完成功能的文本字段上添加一個類似芯片的背景。

看起來像這樣的背景顏色必須根據文本的長度進行裁剪

這是我的代碼。

import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField'

const options = ['Option 1', 'Option 2', 'Option 3']

const AutocompleteComponent = () => {
  return (
    <Autocomplete
      options={options}
      renderInput={(params) => (
        <TextField
          {...params}
          label='Autocomplete'
          inputProps={{
            ...params.inputProps,
            style: {
              
              backgroundColor: 'aqua',
              borderRadius: '25px',
            },
          }}
        />
      )}
    />
  )
}

export default AutocompleteComponent