风格 mui 自动完成

Question

我继承了一个带有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>
);

组件确实得到了样式，但搜索甚至没有执行（我认为这是预期的，但以某种方式让它工作会很好）

Answer 1

如果没有提供的代码沙箱，很难说，但是阅读文档，问题可能在于不将引用转发到自定义输入组件： 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，据我所知告诉。