ReactJS | Styling

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Styling.

Generally, ReactJS allows component to be styled using CSS class through className attribute. Since, React JSX has support for JavaScript expression, lot of common CSS methodology can be used. Some of the top options are as follows -

• CSS stylesheet - Normal CSS styles along with className.

• Inline styling - CSS styles as JavaScript objects along with camelCase properties.

• CSS Modules - Locally scoped CSS styles.

• Styled component - Component level styles.

• Sass stylesheet - Supports Sass based CSS styles by converting the styles to normal CSS at build time.

• Post processing stylesheet - Supports post processing styles by converting the styles to normal CSS at build time.

Let's learn how to apply the three important methodology to style our component in this tutorial.

• CSS Stylesheet.

• Inline Styling.

• CSS Modules.

READ: ReactJS | Components

CSS Stylesheet

CSS stylesheet is the usual and time-tested methodology. Simply create CSS stylesheet for a component and enter all of your styles for the component. Then, in the component use className to refer the styles.

Now, we will style our ExpenseEntryItem component.

Open expense-manager application in your favorite editor.

Next, open up ExpenseEntryItem.css file and add few styles.

div.itemStyle { 
   color: brown; 
   font-size: 14px; 
}

Next, open the ExpenseEntryItem.js and add className to the main container.

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className="itemStyle">
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

Next, serve the application making use of the npm command.

npm start

Now, open your web browser and then enter http://localhost:3000 in the address bar and press enter.

It is very easy to understand and make use of CSS stylesheet. But when the project size increases, CSS styles will also increase and ultimately create lot of conflicts in the class name. Besides, loading the CSS file directly is only supported in Webpack bundler and it may not be supported in other tools.

READ: ReactJS | JSX

Inline Styling

Inline Styling is one of the safest means for styling the React component. It declares all the styles as JavaScript objects using DOM based CSS properties and then set it to the component through style attributes.

Let us add inline styling in our component.

Open expense-manager application in your editor and modify ExpenseEntryItem.js file in the src folder. Declare a variable of the type object and set the styles.

itemStyle = {
   color: 'brown', 
   fontSize: '14px' 
}

Here, fontSize represents the CSS property, font-size. All CSS properties can be used by representing it in camelCase format.

Next, set itemStyle style in the component using curly braces {} -

render() {
   return (
      <div style={ this.itemStyle }>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

Likewise, style can be set directly inside the component.

render() {
   return (
      <div style={
         {
            color: 'brown',
            fontSize: '14px'
         }         
      }>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

Now, we have successfully made use of the inline styling in our application.

Next, serve the application using the npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

READ: ReactJS | Architecture

CSS Modules

CSS Modules provides the safest as well as easiest means to define the style. It makes use of normal CSS stylesheet with a normal syntax. While the style is imported, the CSS modules converts all the styles into locally scoped styles so that the name conflict will not happen. Let's change our component to use CSS modules.

Open expense-manager application in your favorite editor.

Next, you have to create a new stylesheet, ExpenseEntryItem.module.css file under the src/component folder and write regular css styles.

div.itemStyle {
   color: 'brown'; 
   font-size: 14px; 
}

Here, the file naming convention is of great importance. React toolchain pre-processes the css files that ends with .module.css via CSS Module. Otherwise, it will be regarded as a normal stylesheet.

Next, open up ExpenseEntryItem.js file in the src/component folder and import the styles.

import styles from './ExpenseEntryItem.module.css'

Next, make use of the styles as JavaScript expression in the component.

<div className={styles.itemStyle}>

Now, we have successfully utilized the CSS modules in our application.

The final and complete code is -

import React from 'react';
import './ExpenseEntryItem.css';
import styles from './ExpenseEntryItem.module.css'

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className={styles.itemStyle} >
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

Next, serve the application using the npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

READ: ReactJS | Using CDN

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about ReactJS Properties (props).

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.