Develop Reference

Navbar.module.css usage

I am very new to this react stuff. I tried to add styling to my navbar component from module CSS file but it is showing me an error where style can only have objects, not strings.
Below is my code for react component.
I have first imported the file :
import styles from './Components/Navbar.module.css'
Then i tried to give the styles to my component div :
<div className='navbar' style = {styles.navbar}>
I would appreciate your help!
Everything has been mentioned above. Please Help!

Here you are assigning a className as string, rather assign the {styles.navbar} to className and remove the style attribute. This is because the {styles.navbar} is a string and it will assign the component styles as per the className. This will fix your code.
<div className={styles.navbar}>

React router Link tag color is not changing in build environment

I am using tailwind with react and using conditional rendering to change the color of the link tags in the navbar based on different screens. It works fine in the localhost but when I run the build and place it on the server the link's color remains the same. Here is the code for the link
<NavLink
to={`${Routes.main}`}
className={`m-2 block mt-4 lg:inline-block lg:mt-0 lg:${
heroSection ? "text-white" : "text-teal-200"
}`}
>
What is the reason for it to work on the local environment and not in the build?

Don't use string concatenation to create class names:
lg:${heroSection ? "text-white" : "text-teal-200"}
Do dynamically select a complete class name:
${heroSection ? "lg:text-white" : "lg:text-teal-200"}
That means that it is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won’t know to preserve those classes.
learn more: Tailwind Optimizing for Production

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.

React JS and sublime text incompatibily

I use sublime text to learn React.js, and a I have a problem with syntax. When there is a / on my code, all the code after the / have a different color, as if the / change the syntax of the code.
for exemple, if a write :
export default class Featured extends React.Component {
render(){
return (
<h1> Featured </h1>
);
}
}
all the code have a correct color syntax until the , after the / in the tag, all the syntax is orange .. I don't understand, I have install jsx / babel / react plugins on my sublime text ..
Does someone could help me ?
Thank !

You'll need syntax highlighting especially built for JSX and ES6/Babel. Try this: https://github.com/babel/babel-sublime

As an alternative, this syntax https://github.com/borela/naomi covers ReactJS, JSX, Flowtype and ES2017+ where I am adding support even for Stage 0 features.

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.