Невозможно применить css к React className
Невозможно применить 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: /
Вы можете мне помочь? :)
@SergChernata, что ты имеешь в виду? В React className используется для добавления атрибутов класса. Потому что class - это зарезервированное ключевое слово в JS.
Попробуйте настроить загрузчик css, как описано здесь: stackoverflow.com/questions/39853646/…
@AnaFig у вас есть 404 на любой консоли?
@ArupRakshit Я настроил с помощью webpack и babel. и я не получил 404 на моей консоли, что странно
тогда покажите конфигурацию вашего webpack .. у вас настроены загрузчики ..?
@AnaFig, ты получил ответ. ваше правило css было неправильным ..
Ответы 3
У вас есть стиль 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>
);
В этом есть смысл, спасибо! :) все еще не работает, но эту часть я по крайней мере переделал в лучшую сторону
@AnaFig Просто для отладки .. добавьте тело {background: red} в файл css и что вы теперь видите?
Я подозреваю, что ваш css загружен неправильно, вы используете webpack? Вы декларировали css-loader и style-loader? stackoverflow.com/questions/39853646/…
Теперь это работает! :)
//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>
Спасибо всем, кто помог мне за секунды !!!
Я удивлен, что вам пришлось внести эти изменения, чтобы он работал
//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;
}
как настроен ваш реактивный проект?