Can't apply css to React className

Question

Can't apply css to 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;

here's my CSS

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

.Name {
font-size: 20px;
}

.Production {
font-size: 16px;
}

but this doesn't work! it still appears like a list

The image to see how it appears

without any CSS :/

Can you help me? :)

@SergChernata what do you mean? In React `className` is used to add class attributes. Because `class` is a reserved keyword in JS. — Arup Rakshit, Sep 10 '18 at 18:44
Try setting up a css loader as explained here: https://stackoverflow.com/questions/39853646/how-to-import-a-css-file-in-a-react-component — Bonnie, Sep 10 '18 at 18:44
@ArupRakshit I configured with webpack and babel. and I didn't get any 404 on my console, what is weird — AFAF, Sep 10 '18 at 18:46
show your webpack config then.. do you have the loaders configured.. ? — Arup Rakshit, Sep 10 '18 at 18:46

score 4 · Accepted Answer · answered Sep 10 '18 at 19:08

It works now! :)

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

Thanks to all of you who helped me in seconds!!!

score 3 · Answer 2 · answered Sep 10 '18 at 18:49

3

You have the css style list-style: none; so I think CompanyInfo class should be applied to the ul element instead of the div, it should probably be

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

or maybe

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

answered Sep 10 '18 at 18:49

Olivier Boissé

15,834
6
38
56

That makes sense, thank you! :) still doesn't work, but that part at least I changed for better – AFAF Sep 10 '18 at 18:54
@AnaFig Just to debug.. add body { background: red} in the css file and what do you see now? – Arup Rakshit Sep 10 '18 at 18:56
1

I suspect your css is not loaded correctly, do you use `webpack` ? Did you declare the `css-loader` and the `style-loader` ? https://stackoverflow.com/questions/39853646/how-to-import-a-css-file-in-a-react-component – Olivier Boissé Sep 10 '18 at 18:57

score 1 · Answer 3 · answered Nov 04 '19 at 13:42

I am surprised you had to make this changes for it to work

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

Your first implementation like so

import "./index.css" 


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

should work well also. I implemented something similar for my own project like so and it works well.

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

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

my index.css file

.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;
}

Can't apply css to React className

3 Answers3