Ad
React-google-maps: How Can I Dynamically Style The Google Container (.pac-container) Of Multiple StandaloneSearchBox Components?
The container of the Google Places searchbox that is created with react-google-maps has class called .pac-container. Now, I've got multiple of those on one page and I want to style them differently. For example, one should drop upwards, another one downwards.
How can I achieve this? I can't pass down a class name...
Ad
Answer
you can wrap you StandAloneSearchBox with with a parent wrapper.
<div className="ancestor1"><StandAloneSearchBox></div>
<div className="ancestor2"><StandAloneSearchBox></div>
And
.ancestor1 .pac-container
.ancestor2 .pac-container
Maybe you need to put inside StandAloneSearchBox because sometimes google maps ignore parent div. Do let me know if the issue still persists.
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad