Unable to use CSS properties in React

Question

I used npx create-react-app to setup the work space. Then, I deleted all the files in src directory to write everything from scratch. I created a few components one of which is as follows:

import React from "react";

function AwesomeHeader() {
  return (
    <span>
      <input type="checkbox"></input>
      <p className="span-class">Do you like this Awesome header ?</p>
    </span>
  );
}

export default AwesomeHeader;

Now, My App.js file has the following code:

import React from "react";
import AwesomeHeader from "./components/AwesomeHeader";
import AwesomeFooter from "./components/AwesomeFooter";
import MainBody from "./components/MainBody";

function App() {
  return (
    <div>
      <AwesomeHeader />
      <MainBody />
      <AwesomeFooter />
    </div>
  );
}

export default App;

Now, the index.js file is having the following code:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Issue is that when I apply any styling to the components in my style.css file, nothing happens to the styling of the components. The code in the file is as below:

.span-class {
  background-color: red;
  color: white;
}

What's wrong ?

You have not imported you style.css file in your component file, try adding an import statement which will add style to your components. — Shruti B
– Shruti B, Commented Mar 25, 2020 at 17:21
You need to import the css file, like import './style.css' — Ted
– Ted, Commented Mar 25, 2020 at 17:22

D. Richard · Accepted Answer · 2020-03-25 17:21:20Z

1

Did you import the .css file in App.js?

answered Mar 25, 2020 at 17:21

D. Richard

4704 silver badges12 bronze badges

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

1 Comment

Atif Bashir Over a year ago

.css file was not imported

S. Hesam · Accepted Answer · 2020-03-25 19:53:38Z

0

You must add the style.css file to your index.js file. If the style.css file has the same directory like index.js, you should add this

import './style.css'

to your index.js file

answered Mar 25, 2020 at 19:53

S. Hesam

7,1796 gold badges46 silver badges66 bronze badges

Collectives™ on Stack Overflow

Unable to use CSS properties in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related