ReactJS - Stypng

In general, React allows component to be styled using CSS class through className attribute. Since, the React JSX supports JavaScript expression, a lot of common CSS methodology can be used. Some of the top options are as follows −

CSS stylesheet − Normal CSS styles along with className

Inpne stypng − 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 use learn how to apply the three important methodology to style our component in this chapter.

CSS Stylesheet

Inpne Stypng

CSS Modules

CSS Stylesheet

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

Let us style our ExpenseEntryItem component.

Open expense-manager apppcation in your favorite editor.

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

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

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

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

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

Next, serve the apppcation using npm command.

npm start

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

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

Inpne Stypng

Inpne Stypng is one of the safest ways to style the React component. It declares all the styles as JavaScript objects using DOM based css properties and set it to the component through style attributes.

Let us add inpne stypng in our component.

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

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

Here, fontSize represent 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 (
      <span style={ this.itemStyle }>
         <span><b>Item:</b> <em>Mango Juice</em></span>
         <span><b>Amount:</b> <em>30.00</em></span>
         <span><b>Spend Date:</b> <em>2020-10-10</em></span>
         <span><b>Category:</b> <em>Food</em></span>
      </span>
   );
}

Also, style can be directly set inside the component −

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

Now, we have successfully used the inpne stypng in our apppcation.

Next, serve the apppcation using npm command.

npm start

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

CSS Modules

Css Modules provides safest as well as easiest way to define the style. It uses normal css stylesheet with normal syntax. While importing the styles, CSS modules converts all the styles into locally scoped styles so that the name confpcts will not happen. Let us change our component to use CSS modules

Open expense-manager apppcation in your favorite editor.

Next, create a new stylesheet, ExpenseEntryItem.module.css file under src/components folder and write regular css styles.

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

Here, file naming convention is very important. React toolchain will pre-process the css files ending with .module.css through CSS Module. Otherwise, it will be considered as a normal stylesheet.

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

import styles from  ./ExpenseEntryItem.module.css 

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

<span className={styles.itemStyle}>

Now, we have successfully used the CSS modules in our apppcation.

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 (
         <span className={styles.itemStyle} >
            <span><b>Item:</b> <em>Mango Juice</em></span>
            <span><b>Amount:</b> <em>30.00</em></span>
            <span><b>Spend Date:</b> <em>2020-10-10</em></span>
            <span><b>Category:</b> <em>Food</em></span>
         </span>
      );
   }
}
export default ExpenseEntryItem;

Next, serve the apppcation using npm command.

npm start

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