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

Question

I'm trying to change the pac-container for my google autocomplete component. I want to style this pac-container, but I have no idea how to reference the css of the already defined class name.

Here's my code

...
    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)}
            />
        );
    }

Where am i supposed to modify .pac-container? . I've tried modifying right in index.css but that isn't working. I've also tried wrapping my <Textfield/> class in a div and doing

import './test.css'

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

and

this is test.css

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

but that didn't work either.

Doing

 .pac-container {
    margin-top: 500
}

didn't work either.

I know I'm missing something incredibly stupid. Please help. Thanks

Answer 1

you need to include the unit in your margin-top value

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