ReactJS：如何更改 Material Ui Autocomplete 的占位符字体大小？

Question

我想更改 Material Ui Autocomplet 的占位符字体大小。有什么办法吗？

             <Autocomplete
                  multiple
                  id="tags-outlined"
                  options={top100Films}
                  getOptionLabel={(option) => option.title}
                  defaultValue={[top100Films[13]]}
                  filterSelectedOptions
                  size="small"

                  renderInput={(params) => (
                    <TextField
                      {...params}
                     
                      variant="outlined"

                      placeholder="Enter Transshipment Ports"

                      
                    />
                  )}
                />

Answer 1

在您的示例中，您可以定位正在使用的input渲染组件的元素renderInputTextFieldmakeStyles

const useStyles = makeStyles({
  customTextField: {
    "& input::placeholder": {
      fontSize: "20px"
    }
  }
})

<TextField
  classes={{ root: classes.customTextField }}
  {...params}
  variant="outlined"
  placeholder="Enter Transshipment Ports"
/>

下面使用分叉 MUI 演示的示例