pac-container 反应自动完成 - 我如何引用 CSS

Question

我正在尝试为我的 google 自动完成组件更改 pac-container。我想为这个 pac-container 设置样式，但我不知道如何引用已定义类名的 css。

这是我的代码

...
    constructor(props) {
        super(props);
        this.state = {
            address_ignore_autofill: this.props.address,
        };
        this.autocomplete = null;
    }

    componentDidMount() {
        this.autocomplete = new 
google.maps.places.Autocomplete(document.getElementById('address'), {});
        this.autocomplete.addListener("place_changed", this.handlePlaceSelect)
    }

    handleFormChange = (event) => {
        this.setState({ address_ignore_autofill: event.target.value });
    };

    render() {
        const { classes } = this.props;
        return (
            <TextField
                onChange={(e) => this.handleFormChange(e)}
            />
        );
    }

我应该在哪里修改 .pac-container? 。我已经尝试在index.css 中进行修改，但这不起作用。我还尝试将我的 <Textfield/> 类包装在 div 中并做

import './test.css'

<div className='test'>
  <Textfield>
</div>

和

this is test.css

.test .pac-container {
    margin-top: 500
}

但这也没有用。

在做

 .pac-container {
    margin-top: 500
}

也没有用。

我知道我错过了一些非常愚蠢的东西。请帮忙。谢谢

Answer 1

你需要在你的 margin-top 值中包含单位

.pac-container {
    margin-top: 500px;
}