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样式JSONArray jsonArray = new JSONArray(); ArrayList<JSONObject> object = mArrayListSelectedTAGS; for (int i = 0; i < object.size(); i++) { jsonArray.put(object.get(i).getInt("id")); Log.e("idsTags", "SaveTags : " + jsonArray); }，所以我认为JSONArray jsonArray = new JSONArray(); ArrayList<JSONObject> object = mCurrentObjects; jsonArray.put(object.getInt("id")); //but I need .get() before to get the object element I want to stract that id.类应该应用于list-style: none;元素而不是CompanyInfo，它应该是

ul

或者也许

div

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

3 个答案: