我正在尝试将自定义CSS应用到Material 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。任何帮助都很感激。先谢谢你了。
4条答案
按热度按时间mv1qrgav1#
你可以试两个
1.把这两行交换一下
成为
这是因为第二个
{...params}
覆盖InputProps
。1.您可以使用
!important
标记更改Inputprops
CSS,如下所示:1.您需要将spreader
params.InputProps
放入InputProps
中,以确保显示自动完成选项:cngwdvgl2#
如果有人仍然在寻找答案,这是如何根据Autocomplete API正确地将CSS属性应用于输入元素。使用此方法,您可以利用向自动完成组件的基础元素提供类的可能性。
例如,您可以为“inputRoot”指定一个类,以在输入根元素处设置一个类,而不是“input”(取决于您想要实现的目标)
rqcrx0a63#
您可以在renderInput函数中通过参数更改className
ttygqcqt4#
在我的情况下,我有要求,以增加字体大小的标签,我已经解决了以下方式
解决方案:
详细解决方案: