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
– Arup Rakshit, Commented Sep 10, 2018 at 18:44
Try setting up a css loader as explained here: stackoverflow.com/questions/39853646/… — Bonnie
– Bonnie, Commented Sep 10, 2018 at 18:44
@ArupRakshit I configured with webpack and babel. and I didn't get any 404 on my console, what is weird — AFAF
– AFAF, Commented Sep 10, 2018 at 18:46

AFAF · Accepted Answer · 2018-09-10 19:08:22Z

4

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

answered Sep 10, 2018 at 19:08

AFAF

6092 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olivier Boissé · Accepted Answer · 2018-09-10 18:49:31Z

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, 2018 at 18:49

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

3 Comments

AFAF Over a year ago

That makes sense, thank you! :) still doesn't work, but that part at least I changed for better

Arup Rakshit Over a year ago

@AnaFig Just to debug.. add body { background: red} in the css file and what do you see now?

Olivier Boissé Over a year ago

I suspect your css is not loaded correctly, do you use webpack ? Did you declare the css-loader and the style-loader ? stackoverflow.com/questions/39853646/…

Manu_Boca · Accepted Answer · 2019-11-04 13:42:49Z

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

Collectives™ on Stack Overflow

Can't apply css to React className

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related