reject:importing_css_file [Tutorial Site]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== 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. 
{{ :reject:react_css.png?nolink&200 |}} 

Assume we want to do something like above. here is our ''ItemComponent.css'':
<code>
div{
    margin-top: 5px;
}

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

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.

<code>
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;
</code>