javascript ReactJS：如何改变物料界面自动完成占位符字体大小？

62lalag4 于 2023-02-02 发布在 Java

关注(0)|答案(3)|浏览(114)

我想修改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"

                      
                    />
                  )}
                />

JavaScript

来源：https://stackoverflow.com/questions/64413949/reactjs-how-to-change-placeholder-font-size-of-material-ui-autocomplete

3条答案

按热度按时间

tktrz96b1#

在示例中，可以使用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演示

赞(0）回复(0）举报 2023-02-02

mwg9r5ms2#

您只需将：：占位符css添加到输入字段的class/id中，然后更改字体大小
示例：

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

赞(0）回复(0）举报 2023-02-02

b4qexyjb3#

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

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

赞(0）回复(0）举报 2023-02-02

我来回答

javascript ReactJS：如何改变物料界面自动完成占位符字体大小？

3条答案

相关问题

热门标签

最新问答