styling google-map-react map - javascript

I am building a map with google-map-react and trying to style it with no luck. I am using the documentation here: https://github.com/google-map-react/google-map-react/blob/master/API.md and adding styles via a prop called options like it says but I am not seeing any styles being applied.
Here is my code:
const createMapOptions = () => {
return {
styles: [{stylers: [{'saturation': -100}, {'gamma': 0.2}, {'lightness': 4}, {'visibility': 'on'}]}]
}
}
const Map = ({center, children, onGoogleApiLoaded, useGoogleMapsApis, zoom}) => {
return (
<div className='h-100p w-100p'>
<GoogleMap
bootstrapURLKeys={{key: '...'}}
defaultCenter={center}
defaultZoom={zoom}
options={createMapOptions}
yesIWantToUseGoogleMapApiInternals={useGoogleMapsApis}
onGoogleApiLoaded={onGoogleApiLoaded}
>
{children}
</GoogleMap>
</div>
)
}
Any guidance on how to get ANY styling applied would be greatly appreciated.
Note - I am using a developer key, not sure if that could be why I am not seeing the styling?
Also Note - I do not want tips on react-google-maps a similar library, but not the same as google-map-react. Ive seen other google-map-react questions answered and up voted with people referring to react-google-maps.

Some times styling in react as difficult when you use packages. So the Best Way to do it is
Open Inspect Element in your browser
Select the Particular Element whose styling you want to modify.
Copy the class that is used in it already.
Make changes to the same css className in your own scss or css file and will modify.
Note : If nothing Happens Try using the !important in the property.

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions
Use this as resource to change css for the package.
Screenshot from the the above resource

Related

How to prevent styled-components from stripping custom HTML attributes?

My project is trying to switch to styled-components, but there is one big issue: our automated QA tests rely on a custom attribute called qa-component appearing in the dom for each HTML element that it is defined for.
The old way we did this worked fine: <div style={ styles.cssModuleStyle } qa-component="big-area" /> would translate to the dom as <div class="whatever" qa-component="big-area" />.
However, when using styled components, the qa-component attribute gets stripped because SC thinks its a prop.
How can I get styled-components to pass this custom attribute to the dom?
What you're looking for is withConfig + shouldForwardProp. It allows you to define what props get passed down. Here's how you can implement the desired behavior:
const StyledTitle = styled.h1.withConfig({
shouldForwardProp: (prop, defaultValidatorFn) =>
defaultValidatorFn(prop) || ['qa-attribute'].includes(prop),
})`
text-decoration: underline;
`;
Take a look at the docs here: https://styled-components.com/docs/api#shouldforwardprop
And here's a playground with this approach: https://stackblitz.com/edit/stackoverflow-71912300

Render a custom component using react-google-maps - ReactJS

I want add a custom marker component to the map but I notice that using react-google-maps/api does not render custom components. As a simple example I used the following code:
const AnyReactComponent = ({ text }) => <div>{text}</div>;
...
<GoogleMap
mapContainerStyle={containerStyle}
center={this.props.center}
zoom={this.props.zoom}
>
{<AnyReactComponent lat={38.26} lng={-7.61} text="My Marker" />}
</GoogleMap>
...
It's possible to do such things with this framework? Also, is possible to add buttons components to an infoBox or, rendering an options section when click on a marker?
Since the react-google-maps/api wrapped the google's API so much, it seems that's not likely. So, you'll be limited to the package's components, but I recommend it for simpler goals because there's a lot of documentation available. Note that react-google-maps is no longer maintained, but this project is continued by react-google-maps/api.

Apply motion to react component Framer-Motion

I know that I can apply motion directly to element/HTMLtag like this:
<motion.div>some content</div>
But how can I apply it to this?
<Comp />
Without wrapping it inside another HTML element, like in React-Transition-Group library.
Framer API provides Frame component, but it acts like permanent additional HTML element with own styling, and it is messing my layout.
If anyone comes to this page seeking for the solution of how to apply motion from Framer-Motion library to your React Component and not the direct DOM element like "div" or "span", here it is:
motion.custom()
Example of use:
import { Link } from "react-router-dom"
const MotionLink = motion.custom(Link)
return <MotionLink />
As for today it is not mentioned in the official documentation, or it is in someplace deep and hard to find.
I had found it in BUG reports here, there is a Codesanbox that illustrates my example, created by the person who reported a bug.
motion.custom was deprecated as of v4.0 in favour of motion(Component) or motion("Component").
Your code would simply look like this
const MotionComp = motion(Comp)
return <MotionComp>some content</MotionComp>
Without using any internal fuctions,
You just need to wrap it with any motion element:
<motion.div>
<Comp />
</motion.div>
You can notice such behavior across examples in the docs, like of Side Menu example.

What happens when i use inline style and css files in React?

I am refering to a situation in which i have something like this:
import "./myCss.css"
const BeautyButton = (props) =>{
return (
<a style={{backgroundColor:"red"}} className="blue-background" >hello</a>
);
}
Which property prevails? Is there a general rule for all the properties (fontSize, width, etc)?
There is nothing different between how CSS works in React and with regular HTML. To understand which rules take effect, you'll want to study the concept of Specificity in CSS.
For your specific question, inline styles are considered more specific than styles in external stylesheets, so those styles will prevail.

Issue using multiple styles with Material-ui and Radium

I am trying to combine Radium and Material-ui. When I try to apply multiple styles on a single Material-ui component, no style is applied. So, for example, something like this produces no styling applied:
<MenuItem style={[styles.styleOne, styles.styleTwo]} >
Of course, if I do something like:
<MenuItem style={Object.assign({}, styles.styleOne, styles.styleTwo)} >
it works. Is there some way around it or this is the only way to use Radium for combining styles for a Material-ui component? And just to mention, Radium is properly set up, because applying array of styles on, for example, DIV element or works properly.
Also, I am open to any suggestion about styling a React project that uses Material-ui library. Thanks!
For material-ui components in react, we add styles using the className. If i have to add multiple styles in a material component then below are the methods:
Example 1:
<div className={`${style1} ${style2}`}>
Example 2:
import classNames from 'classnames';
<div className={classNames(classes.style1, classes.style2)} />
Specifically for your case (Radium):
What it's doing is merging 2 objects (style1 and style2) into a new anonymous object {} which is what you need to do.
You'll want to be careful when doing this however as you'll need to consider how you merge if both objects define the same key e.g. if style1 and style2 both define a height which do you use?
There's a long list of possible ways to do this on this stackoverflow thread http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically depending on the libraries you're using and your use case they each have their own pros and cons.
Instead of adding classnames, you can also use the clsx module that comes with Material UI and combine your style classes.
{/* using arrays */}
<MyComponent classes={clsx([classes.text, classes.title])} />
{/* using conditions */}
<div className={clsx(classes.root, {
[classes.base]: true,
[classes.closed]: !open,
[classes.open]: open
})]>
{props.children}
</div>
The Material UI Mini Variant Drawer example does a great job showing this module off.
Check out this fiddle: https://jsfiddle.net/Lxh5x2qr/
It uses the JSX spread (...) operator, which is a bit nicer syntax:
styleOne: {
background: 'blue',
color: 'red'
},
styleTwo: {
background: 'green'
},
... style={{...this.styleOne, ...this.styleTwo}} ...
Please notice the the order of object does matter, just like in Object.assign.
We should not forget that MenuItem is not a DOM element, so when we apply style to it, material-ui manipulates it before applying it to the underlying element, and probably this is the reason why using an array does not work.

Categories

Resources