Unable to import Css in my jsx component in reactjs

Question

I have started working on reactJS. I was watching a tutorial where Css was passed separately to jsx component and I tried doing the same but failed. There is no error, But the changes in CSS is not getting implemented.

I even installed loaders after this but not getting any result

npm i css-loader style-loader --save-dev

yarn add --dev css-loader style-loader

App.js

import React, { Component } from 'react';
import{Form, FormControl, Button} from 'react-bootstrap';
import './App.css';

class App extends Component{
  render(){

      return(                      
       <div ClassName = "App">             
          <Form inline>
             <h2>Input your Birthday! </h2>
             <FormControl type = "date">
             </FormControl>
             {' '}
             <Button>
               Submit
             </Button>
          </Form>
     </div>      
    )
  }
}

export default App;

App.css

.App{
    padding: 5%;
    text-align: center;
    font-size: 16px;

}

index.js

import React from 'react';   
import ReactDOM from 'react-dom'; 

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

"I even installed loaders after this but not getting any result" - that is not enough. You should implement that loader in webpack.config. Show webpack.config code here too. — Arseniy-II
– Arseniy-II, Commented Sep 11, 2019 at 5:07
Hmm you are using createe-react-app. I don't even know where is you problem in that case. You better ask here — Arseniy-II
– Arseniy-II, Commented Sep 11, 2019 at 5:35

Taimoor Ali · Accepted Answer · 2019-09-11 05:47:35Z

1

To start off, you need to import App.js in index.js ( I dont know why it is not throwing an error). Secondly for the styles, I tried to change the class name from "App" to "app" and it works fine now. I am not sure ofthe reason tho, but it maybe something to do with "App" being reserved. Here is code sandbox

answered Sep 11, 2019 at 5:47

Taimoor Ali

1781 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

Unable to import Css in my jsx component in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related