CODEWITHSUNDEEP
reactjs
Atif Bashir
Atif Bashir

Reputation: 359

Unable to use CSS properties in React

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 ?

Upvotes: 1

Views: 473

Answers (2)

S. Hesam
S. Hesam

Reputation: 6623

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

Upvotes: 0

D. Richard
D. Richard

Reputation: 472

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

Upvotes: 1

Related Questions