Importing CSS file

React using sudo DOM, and we can apply css style to each component independently. Usually, we put the css file and the component in the same sub directory.

Assume we want to do something like above. here is our ItemComponent.css:

div{
    margin-top: 5px;
}

.item-component-span {
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
}

We need to import it in our component with import './ItemComponent.css';. One thing to note that we need to use className instead of class in JSX.. Using class will not work.

import React from "react";
import './ItemComponent.css';

const ItemComponent = (prop) => {
    return (
        <div>
            <span className="item-component-span"
                  key={prop.index}
                  onClick={prop.clickHandler}>
                name: {prop.name}, price: ${prop.price}, key: {prop.index}</span>
        </div>
    );
};

export default ItemComponent;