React Styling in Divi Modules Development

Hi everyone, today we want to talk about the styling in React and specifically in our Divi Modules development.

So, let’s get started!

STYLES IN REACT

When dealing with styles in React you can feel a little confused cause there are several ways in order to style your elements and components. Let’s give them a quick look.

INLINE STYLES

The easiest and and fastest way to add styles to our React components is certainly the Inline Style. You can simple create a constant in your render function and store in it as an object your css properties, then just call the constant inside curly braces in the style attribute of the element you want to apply the style:

Inline Styles

render() {

 const style = {
 backgroundColor: white,
 color: green
 }

 return(
 <div style={{ backgroundColor: red }}>
 <div style={style}>This Div uses style with const 'style'</div>
 </div>
 );

}

The major drawback of this method is that you can’t use pseudo selector like :hover, ::after and so on.

CSS FILES

Another common way to style your components is certainly adding separated Css files and calling them at the top of your component Js file. Then you can just assign the classes you have stored in the Css file to the element you want through the ‘className’ attribute:

Css Files

import './component.css';


render () {

 return(
 <div className='myClass'>The classes are stored in the Css file!</div>
 );
}

PACKAGES LIKE RADIUM

In order to add flexibility to your css directly in your Js file working for example with pseudo selectors and media queries you can use third-party packages like Radium; you can just install it:

Installing Radium

npm install --save radium

Then you have to import it in your component file and wrap your exported component (at the bottom of the file) with ‘Radium()’:

Import Radium and wrap your component

import Radium from 'radium';

...


export default Radium(App);

Now that you set up your component with Radium you can add your pseudo directly inside your inline style and also work with inline styles dynamically:

Styling with Radium

const style = {
 backgroundColor: green,
 color: white,
 ':hover': {
 backgroundColor: red,
 color: lightblue
 }
}

...

if (this.state.yourState) {
 style[':hover'] = {
 backgroundColor: black
 }
}

CSS MODULES

Of course you can use other packages and ways to style your component but the last method we talk about here is another of the more common ways to work with styles in React: Css Modules. Css Modules way is very common for one simple reason: it let us to scope the css we put in our component Css file just to that component and not to all the app components as it is by default.

In order to install Css Modules in your project we recommend you to follow this link. Then, once Css Modules are set up in your project you can just add classes in your Css file (commonly is used to name the classes capitalized), then import and use them with the following syntax:

Import and use Css modules

import classes from './component.css';

render() {

return(
 <div className={classes.MyClass}></div>
 );

}

Doing so Css modules automatically assign a prefix and a unique suffix to the class name you chose, so your final class name will be unique and no conflicts will be possible across the entire application!

STYLES IN MODULE DEVELOPMENT

As always the method you will use depends also from the project you are working on… in some cases you just need a very simple styling and you can use just inline styles. However this option is often not recommended and for our purpose – that is Divi module development – a separated Css file is always the best solution.

Is anyway up to you if use Radium or similar third-party package or Css Modules is your Divi module is going to be bigger and bigger.

FINAL THOUGHTS

So we gave a quick overview on how you can grab the power of React styling and put it in your Divi module development workflow. For one component modules we suggest you to keep it simple, use just inline or one Css file; anyway if you are planning to create a complex module with more than one component and more than one css file we recommend you to use also Css Modules in order to avoid name collisions.

See you next post!