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

Question

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

             <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"

                      
                    />
                  )}
                />

- theWanderer

Answer 1

在您的示例中，您可以使用makeStyles针对renderInput中渲染的组件TextField的input元素进行定位。

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

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

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

- 95faf8e76605e973

---

也可以这样写： "&::placeholder": { color: "red", }, },``` - the_flucs

Answer 2

sx 属性允许用户覆盖应用于 MuiFormLabel-root 对象的样式，包括字体大小。这对于创建更适合用户设计需求的自定义标签非常有用。

<TextField
        {...props}
        sx={{
          '& .MuiFormLabel-root': {
            fontSize: '0.8rem',
          },
        }}
      />

- Guit Adharsh

Answer 3

您可以将::placeholder CSS 添加到输入字段的类/ID中，并更改字体大小。

例如：

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

- Lafa

---

我已经完成了，只需将我发送给你的代码行添加到你的CSS中，然后告诉我。 - Lafa