How to style your react components!

In this article we will go over three simple ways you can style your React components. You can choose to use any the these methods, they all get the job done. It all depends on your personal preference.

You might decide to choose different methods depending on what you’re trying to accomplish. For example if you just want to add a few style properties, then inline styling is probably your best option.

On the other hand if you want to reuse the style properties in the same file then style-component is what you’re looking for.

If you’re working on a complex application then the recommended option would be to use CSS Modules or regular CSS stylesheets.

1. Inline Styling

In React, it is important to note that inline styles are not specified as a string. Instead they are objects whose key is the camelCased version of the style name.

import React from 'react'; 
const myStyle = {  
     margin: '50px',  
     border: '7px solid blue'
};
const otherStyle = {  
     fontSize: '20px',  
     textAlign: 'center'
}; 
const Hello = () => (  
  <div style={myStyle}>    
   
   <p style={otherStyle}>React is my favorite framework</p>  
  </div>); 

export default Hello;

Firstly you want to create a variable that stores style properties after that, pass it to the element like style={imThevariable} . We are also able to pass the styling directly style={{color: 'red'}}

2. CSS Modules

A CSS Module can be extremely useful when styling an application. It’s a CSS file where all class names and animation names are scoped locally by default.

import React from 'react';
import styles from './DashedBox.css'; 
const theOffice = () => (  
   <div className={styles.container}>    
     
     <p className={styles.content}>These are CSS Modules</p>  
   </div>
); 

export default theOffice;

CSS Modules are similar to Stylesheets where first you must import your react app like so “ import styles './DashedBox.css' “. We then simply access the className as we access the object.

:local(.container) {   
       margin: 50px;   
       border: 10px dashed red; 
} 
:local(.content) {   
       font-size: 20px;   
       text-align: center; 
}

Due to webpack configurations use this:local(.className)when you use create-react-app.

If you’re using your own react boilerplate than this is what you should use .className.

For CSS modules to work with Webpack make sure you include the following to your webpack.config.js file:

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

3. Styled-components

Lastly we have Styled-Components. This is a library for React as well as React Native. It allows you to use component-level styles in your application. These are written with a mixture of both JavaScript and CSS.

import React from 'react';
import styled from 'styled-components'; 

const Div = styled.div`  
  margin: 50px;  
  border: 7px outset red;  

  &:hover {   
   background-color: white; 
}
`; 
const Paragraph = styled.p`  
   font-size: 20px;  
   text-align: center;
`; 
const theOffice = () => (  
    <Div>    
      <Paragraph>Hope this helps</Paragraph> 
 
    </Div>); 
export default theOffice;

First things first we need to install thestyled-components library like so npm install styled-components --save . Then we need to create a variable by selecting an html element where we store our style keys. For example const Div = styled.htmlElemnet`color: red` . When we have all that setup we can now use the name of our variable as a wrapper <Div></Div> .

These were three possible ways to style a React app. Hope this helps you on your way to creating an awesome application.