Не удается применить CSS к React className

Question

Невозможно применить css к 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;

вот мой CSS

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

.Name {
font-size: 20px;
}

.Production {
font-size: 16px;
}

, но это не работает!он по-прежнему выглядит как список

Изображение, чтобы увидеть, как оно выглядит

без CSS: /

Можете ли вы помочь мне?:)

Answer 1

Работает сейчас!:)

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

Спасибо всем, кто помог мне за считанные секунды !!!

Answer 2

У вас есть стиль css list-style: none;, поэтому я думаю, что класс CompanyInfo должен применяться к элементу ul вместо div, вероятно, он должен быть

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

или, возможно,

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