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

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


reactjs components css classname
person AFAF    schedule 10.09.2018    source источник
comment
как настроен ваш реактивный проект?   -  person Arup Rakshit    schedule 10.09.2018
comment
@SergChernata, что ты имеешь в виду? В React className используется для добавления атрибутов класса. Потому что class — это зарезервированное ключевое слово в JS.   -  person Arup Rakshit    schedule 10.09.2018
comment
Попробуйте настроить загрузчик css, как описано здесь: stackoverflow.com/questions/39853646/   -  person Bonnie    schedule 10.09.2018
comment
@AnaFig у тебя есть 404 любая консоль?   -  person Arup Rakshit    schedule 10.09.2018
comment
@ArupRakshit Я настроил с помощью webpack и babel. а у меня на консоли 404 не было, что странно   -  person AFAF    schedule 10.09.2018
comment
тогда покажите конфигурацию вашего веб-пакета .. у вас настроены загрузчики .. ?   -  person Arup Rakshit    schedule 10.09.2018
comment
@AnaFig, ты получил ответ. ваше правило css было неправильным..   -  person Arup Rakshit    schedule 10.09.2018

Ответы (3)


arrow_upward
2
arrow_downward

У вас есть стиль 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>
);
person Olivier Boissé    schedule 10.09.2018
comment
Это имеет смысл, спасибо! :) по-прежнему не работает, но по крайней мере эту часть я изменил в лучшую сторону - person AFAF; 10.09.2018
comment
@AnaFig Просто для отладки .. добавьте body { background: red} в файл css, и что вы теперь видите? - person Arup Rakshit; 10.09.2018
comment
Я подозреваю, что ваш css загружен неправильно, вы используете webpack? Вы объявили css-loader и style-loader? stackoverflow.com/questions/39853646/ - person Olivier Boissé; 10.09.2018

arrow_upward
2
arrow_downward

Теперь это работает! :)

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

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

person AFAF    schedule 10.09.2018

arrow_upward
0
arrow_downward

Я удивлен, что вам пришлось внести эти изменения, чтобы он работал

//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;
}
person Manu_Boca    schedule 04.11.2019