Question

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

System.setProperty("user.dir", YOUR_WORKING_DIRECTORY);
String dir = System.getProperty("user.dir")

我相信我的TextField的样式正确，但是它的CSS被自动完成CSS覆盖了。任何帮助表示赞赏。预先感谢。

Answer 1

您可以尝试其中的两种，

交换这两行

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

成为

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

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

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

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

Answer 2

如果有人仍在寻找答案，这就是根据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”指定一个类来代替“ input”，以在输入路由元素上设置一个类（取决于您要实现的目标）

Answer 3

您可以在 renderInput 函数中通过参数更改 className

const useStyles = makeStyles((theme) => ({     
    comboOptions: {
        fontSize: '12px',
        color: 'red'
    }
}));


    <Autocomplete key={index}
    size="small"
    value={combo.value}
    options={combo.options}
    renderOption={(option) => (
        <Typography className={classes.comboOptions}>{option.name}</Typography>
    )}
    getOptionLabel={(option) => option.name}
    renderInput={(params) => {
        params.inputProps.className = classes.comboOptions
        return <TextField
            {...params} label={combo.text}
            variant="outlined"
        />
    }
    }
    onChange={(event, newValue) => {
        combo.onChange(newValue)
    }}
/>

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

3 个答案: