我继承了一个带有material ui的项目,我以前从未使用过它。我的代码中有以下内容
<FormControl fullWidth>
<InputLabel
className={className}
htmlFor={id}
error={error}
>
{label}
</InputLabel>
<Input
className={className}
id={id}
value={value}
onChange={(e) => {
onChange(e.target.value)
}}
/>
</FormControl>
这在任何地方都有效,标签缩小并且样式应用正确。 当我检查代码时,我看到下划线的样式使用 :before 和 :after 伪类 我需要将相同的内容应用于自动完成,即使用谷歌地点来自动完成位置。如果这很重要的话,我正在使用的库是react-google-autocomplete
我已经尝试过(在一万亿种其他事情中)
const {ref} = usePlacesWidget({
apiKey: process.env.REACT_APP_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
},
});
return (
<FormControl fullWidth>
<InputLabel
className={className}
htmlFor={id}
error={error}
>
{label}
</InputLabel>
<Autocomplete
ref={ref}
id={id}
className={className}
placeholder=""
renderInput={(params) => (
<Input
{...params}
InputProps={{
...params.InputProps,
className: {className}
}}
/>
)}
/>
</FormControl>
);
标签有样式但不收缩。我什至尝试添加
InputLabelProps={{
shrink: true,
...props.InputLabelProps,
}}
无济于事。
文本字段应用了大小及其文本内容(字体)的样式 - 没有伪类,并且使用默认的轮廓样式进行概述。
我想知道如何使用已传递的类名复制其余文本字段的外观,如问题中的第一个代码片段所示。非常感谢你
另一方面,做
const {ref} = usePlacesWidget({
apiKey: process.env.REACT_APP_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
},
});
return (
<FormControl fullWidth>
<InputLabel
className={className}
htmlFor={id}
error={error}
>
{label}
</InputLabel>
<Input
ref={ref}
id={id}
className={className}
/>
</FormControl>
);
组件确实得到了样式,但搜索甚至没有执行(我认为这是预期的,但以某种方式让它工作会很好)
如果没有提供的代码沙箱,很难说,但是阅读文档,问题可能在于不将引用转发到自定义输入组件: https://mui.com/material-ui/react-autocomplete/#custom-input
他们在示例中总是使用
TextField
。
并且
react-google-autocomplete
文档没有按照您尝试的方式使用它的示例https://github.com/ErrorPro/react-google-autocomplete/blob/HEAD/docs/examples.js,据我所知告诉。