Can't apply css to React className

Question

Can't apply css to React className...

import React from "react";
import "./index.css";

class CompanyInfo extends React.Component {

render() {

    return (
        <div className="CompanyInfo">
            <ul>
                <li className="Name">Company Name</li>
                <li className="Production">Production</li>
            </ul>
        </div>
    );
};
}

export default CompanyInfo;

here's my CSS

.CompanyInfo {
list-style: none;
font-family: 'Hind', sans-serif;
color: white;
}

.Name {
font-size: 20px;
}

.Production {
font-size: 16px;
}

but this doesn't work! it still appears like a list

The image to see how it appears

without any CSS :/

Can you help me? :)

Answer 1

It works now! :)

//Changed this  
import "./index.css" 
//To this
import Styles from "./index.css"


//Change this
<li className="Name">Company Name</li>
//To this
<li className={Styles.Name}>Company Name</li>

Thanks to all of you who helped me in seconds!!!

Answer 2

You have the css style list-style: none; so I think CompanyInfo class should be applied to the ul element instead of the div, it should probably be

return (
    <div>
        <ul className="CompanyInfo">
            <li className="Name">Company Name</li>
            <li className="Production">Production</li>
        </ul>
    </div>
);

or maybe

return (
    <ul className="CompanyInfo">
        <li className="Name">Company Name</li>
        <li className="Production">Production</li>
    </ul>
);