无法将 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;
}

但这行不通！它仍然看起来像一个列表

The image to see how it appears

没有任何 CSS :/

你能帮帮我吗？ :)

Answer 1

你有 css 样式 list-style: none; 所以我认为 CompanyInfo class 应该应用于 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>
);

Answer 2

现在可以使用了！ :)

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

我很惊讶您必须进行此更改才能正常工作

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

你的第一个实现是这样的

import "./index.css" 


<li className="Name">Company Name</li>

应该也能正常工作。我像这样为自己的项目实现了类似的东西，效果很好。

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

export default function Header() {
  return <header className="navbar">This is my header</header>;
}

我的index.css文件

.navbar {
  height: 100px;
  background-color: purple;
  color: whitesmoke;
  margin-bottom: 15px;
  text-align: center;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

无法将 css 应用于 React className

Can't apply css to React className

css

components

classname

reactjs