时间戳

首页 > 解决方案 > 如何更改 Material UI 自动完成字体大小？

css - 如何更改 Material UI 自动完成字体大小？

问题描述

我正在尝试将自定义 css 应用于 Material UI Autocomplete 组件。具体来说，我想更改输入字段的字体大小。这是我现在拥有的：

<Autocomplete
  style={{
    width: 200,
    height: 60,
    marginLeft: 15,
  }}
  options={["foo", "bar"]}
  renderInput={(params) => (
    <TextField
      InputProps={{ style: { fontSize: 30 } }}
      {...params}
      margin="normal"
    />
  )}
/>

我相信我的 TextField 样式正确，但它的 CSS 被自动完成 CSS 覆盖。任何帮助表示赞赏。提前致谢。

标签： cssreactjsmaterial-ui

解决方案

如果有人仍在寻找答案，这是如何根据Autocomplete API正确地将 CSS 属性应用于输入元素。使用此方法，您可以利用为自动完成组件的底层元素提供类的可能性。

<Autocomplete 
size={"small"} 
id="box" options={myOptions} 
getOptionLabel={(option: string) => option} 
renderInput={(params) => <TextField {...params} variant="outlined" /> } 
classes={{ input: classes.smallFont }} />

例如，您可以为“inputRoot”指定一个类，而不是“输入”，以在输入根元素处设置一个类（取决于您想要实现的目标）

推荐阅读