Adding CSS Styling in React Project

Back to: ReactJS Tutorials

Adding Basic CSS Styling in React Project:

In this article, we will apply some Basic CSS Styling to our React Project. Now, regarding the styling of our components, we still use CSS, but there is nothing too React-specific when it comes to that CSS code. In the end, we can just add a new CSS file, and typically for the CSS code of a given component, you add that file next to the component JavaScript file and that would be the ExpenseItem.css file here.

We will write our CSS code in the ExpenseItem.css file. Since this is not a CSS course, we don’t want to bore you with writing a lot of CSS code. And hence you will find a finished ExpenseItem.CSS file.

Now back in ExpenseItem.js, we need to do one important thing, we need to make the overall build process aware of that ExpenseItem.css file and tell it that the CSS code should be considered and injected in the finished application. because it’s not by default browsing all your files and automatically including everything. you explicitly have to tell React or that build process that a certain file should be considered.

For ExpenseItem.js, we have imported ExpenseItem.js in the App.js file. For ExpenseItem.css, we need to import it in the ExpenseItem.js file,

This simply tells the build process that the CSS files should be considered. Now instead of that CSS file, we just prepared a bunch of CSS classes that can be added to elements to apply a certain look and therefore, we need to add those classes in the HTML code in ExpenseItem.js in our component.

Below is the complete CSS code of ExpenseItem.css,

.expense-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 0.5rem;
    margin: 1rem 0;
    border-radius: 12px;
    background-color: #696969;
  }

  .expense-item__date {
    font-weight: 500;
  }
  
  .expense-item__description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
    flex-flow: column-reverse;
    justify-content: flex-start;
    flex: 1;
  }
  
  .expense-item h2 {
    font-size: 1rem;
    flex: 1;
    margin: 0 1rem;
    color: white;
  }
  
  .expense-item__price {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background-color: #dd4a36;
    border: 1px solid white;
    padding: 0.5rem;
    border-radius: 12px;
  }
  
  @media (min-width: 580px) {
    .expense-item__description {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex: 1;
    }
  
    .expense-item__description h2 {
      font-size: 1.25rem;
    }
  
    .expense-item__price {
      font-size: 1.25rem;
      padding: 0.5rem 1.5rem;
    }
  } 

Now there’s one special thing here. We don’t write a class to the element as we do in regular HTML but instead className. And this can be strange, but you have to keep in mind that this is not HTML. It looks like HTML, but this is a special JSX syntax invented by the React team. And in the end, under the hood, it’s still JavaScript code that’s why most attributes are the same, but not all. So, here, the class attribute was renamed to className because the class is a reserved word in JavaScript.

Technically it will still work if you would use class inside tags but you should use className. Now, on the root div, which wraps everything, we want to add the expense-item class. So, we will write,

<div className=’expense-item’>

We have created this ‘expense-item’ class in our CSS code which we have shared above. On the div which holds our title and amount, we add another class that is expense-item__description,

<div className=’expense-item__description’>

In this way, we will add all the classes with their corresponding element. So, our ExpenseItem JSX code is,

import './ExpenseItem.css';

function ExpenseItem() {
  return (
    <div className='expense-item'>
      <div className='expense-item__date'>May 26th, 2023</div>
      <div className='expense-item__description'>
        <h2>Household Expense</h2>
        <div className='expense-item__price'>₹ 25000</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

Now, if you now save everything, it should look like this, which is definitely nicer. But still not the final look that we want but definitely nicer. You can zoom in or zoom out to check whether your layout is responsive or not.

So, how easy is it to add styling to your React components? You have to be aware of the fact that it’s className instead of class, but other than that, it’s really just standard CSS code, which is added to your elements. And in that CSS code, you can use all the selectors you might know. You’re not limited to classes. So, that’s how we can style our components.