Develop Reference

styling google-map-react map

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

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.

React Styling with Create React App

I'm new to React.
Quotes from Create React App:
Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in AcceptButton and RejectButton components, we recommend creating a Button component with its own .Button styles, that both AcceptButton and RejectButton can render (but not inherit).
Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition.
I don't think I understand it fully. Why sass nesting and mixing are less useful with composition? Any example?
Does that also mean I shouldn't have global styles, for example, for an input field? If all the input fields in my app look the same or similar, I should create a component for it, just for the styling purpose?

SASS nesting helps ensure your styles don't leak outside the parent class(es). With component composition, this is automatically enforced because you nest components within components.
Mixins are a way of reusing styles across selectors. With component composition, the reusing comes from composing in the JSX instead of CSS.
Old Way
CSS
.button {
color: #fff;
&.button-accept {
background-color: green;
}
&.button-reject {
background-color: red;
}
}
JSX
function AcceptButton() {
return <button className="button button-accept">Accept</button>;
}
function RejectButton() {
return <button className="button button-reject">Reject</button>;
}
React Way
const buttonStyles = { color: '#fff' };
function Button(props) {
return <button style={Object.assign({}, buttonStyles, props.style)}>
{props.children}
</button>;
}
const acceptStyles = { backgroundColor: 'green' };
function AcceptButton(props) {
return <Button style={acceptStyles}>Accept</Button>;
}
const rejectStyles = { backgroundColor: 'red' };
function RejectButton(props) {
return <Button style={rejectStyles}>Reject</Button>;
}
Note that this uses inline-styles, which may not be ideal in real-world situations where you repeatedly render the same element and the styles are present for each element in the DOM. To solve that, check out some of the CSS-in-JS solutions, such as JSS.
Does that also mean I shouldn't have global styles, for example, for an input field? If in my app all the input fields look the same or similar, I should create a component for it, just for the styling purpose?
That depends on whether you are using any UI framework. If you are rolling out your own from scratch, then it might be possible to do so. Otherwise, global styles are almost unavoidable.
Not that this is not a binary decision. Many of the existing CSS frameworks are not written just for React and will not play well with the CSS-in-JS approaches that React encourages.

ReactJS: How can I center the placeholder and text for Material-UI's <DatePicker/>?

I am using <DatePicker/> from http://www.material-ui.com/#/components/date-picker for my ReactJS project and would like to center align the placeholder and input text. So I tried textAlign:'center' to textFieldStyle and the regular style properties, yet still did not work.
Is there a way to implement the center alignment?
Thank you
EDIT
//So inside tried style={{textAlign: 'center'}} and textFieldStyle={{textAlign: 'center}} but neither worked
<DatePicker hintText="Choose Date" container="inline" />

Try using "inputStyle". That is the property used by TextField. Looking into the source code for DatePicker, it looks like it should pass that property verbatim into the enclosed TextField via JSX's spread attribue. So, give this a try...
<DatePicker
hintText="Choose Date"
container="inline"
inputStyle={{ textAlign: 'center' }}
/>

Part of the problem is that Material-UI (for better or worse) decided to in-line all of their styles, and many of them are in inner div's that aren't overidden by JSX styling.
If you are not doing this programatically simply writing your styles in a CSS sheet and adding it to your project, and unfortunately using !important is probably the easiest way.
If it does have to be programatic (as in your business logic is dictating what your CSS should be), you can get try wading into writing a stylesheet in your JavaScript and appending it to the DOM.