CSS not being applied to component in React-CodePudding

I have a CSS file which I have imported in the index.js file and the App.js as well, but still the CSS is not being applied to to the component

App.js:

import "./App.css";
function App() {
  return (
    <div classname="wrapper">
      <h1>BookList App</h1>
      <p>Add or remove books</p>
      <div classname="main">
        <div classname="form-container"></div>
        <div classname="view-container"></div>
      </div>
    </div>
  );
}

export default App;

index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./App.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";

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

/
reportWebVitals();

File structure:

src:
|App.css
|App.js
|index.js

I am not able to understand why the CSS is not being applied even though I have imported it

CodePudding user response：

You need to replace classname with className ( N capital in className). It should fix your issue.

Try the code given below:

import "./App.css";
function App() {
  return (
    <div className="wrapper">
      <h1>BookList App</h1>
      <p>Add or remove books</p>
      <div className="main">
        <div className="form-container"></div>
        <div className="view-container"></div>
      </div>
    </div>
  );
}

export default App;