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

Question

我正在尝试应用自定义css到材料UI自动完成组件。具体地说，我想改变输入字段的字体大小。我现在有的是：

<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

万一有人还在搜索答案，这就是如何根据Autocomplete API将CSS属性正确应用到输入元素。通过这种方法，您可以利用为autocomplete组件的底层元素提供类的可能性。

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

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

Answer 2

你可以尝试其中的两种,

1. 交换这两行

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

成为

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

这是因为第二个{...params}重写了inputprops。

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