Using CSS styles in our components

Using CSS styles in our components

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

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;

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