1. We need to define a CSS style file, usually with the same name as our component, and put all the CSS code in there:

Untitled

  1. Then we should import that file into our component:

src/components/ExpenseItem.js

import './ExpenseItem.css';

function ExpenseItem() {
    return (
        <div className="expense-item">
            <div>Date</div>
            <div className="expense-item__description">
                <h2>Title</h2>
                <div className="expense-item__price">$123</div>
            </div>
        </div>);
}

export default ExpenseItem;
  1. We should use className instead of class (which is a JavaScript reserved word) to use the classes we defined in the CSS file.