ReactJS：如何更改 Material Ui 自动完成的占位符字体大小？

Question

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

             <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

您可以将::占位符css添加到输入字段的class/id，并更改font-size

示例：

#tags-outlined::placeholder {
   font-size: 14px;
}

Answer 2

在您的示例中，您可以使用 makeStyles

定位在 renderInput 中呈现的组件的 input 元素，即 TextField

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

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

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

ReactJS：如何更改 Material Ui 自动完成的占位符字体大小？

ReactJS: How to change placeholder font size of Material Ui Autocomplete?

javascript

reactjs

material-ui

material-table