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

Question

我正在尝试将自定义 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 覆盖。任何帮助表示赞赏。提前致谢。

Answer 1

你可以尝试其中 2 件事，

1. 交换这两行

InputProps={{ style: { fontSize: 30 } }}
{...params}

成为

{...params}
InputProps={{ style: { fontSize: 30 } }}

这是因为第二个{...params}覆盖了InputProps.

2. 您可以Inputprops使用!important标记更改 CSS，如下所示：

InputProps={{ style: { fontSize: `30 !important` } }}

3. 您需要放入展开器params.InputProps以InputProps确保显示自动完成选项：

InputProps={{ ...params.InputProps, style: { fontSize: `30 !important` } }}

Answer 2

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

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

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