CODEWITHSUNDEEP
cssreactjs
AltBrian
AltBrian

Reputation: 2572

React component is not reading my css file

For some reason, my React Component is not reading my CSS file. This is the code in my React component.

import React, { Component } from 'react';
import './Jumbotron.css';

 class Jumbotron extends Component {
  render() {
    return (
        <div className="Jumbotron jumbotron-fluid">
            <div className="container">
             <h1 className="display-3">{this.props.title}</h1>
             <p className="lead">{this.props.subtitle}</p>
             <p className="lead">{this.props.name}</p>
            </div>

         </div>
       ) 
    }
  }

 export default Jumbotron;

Below is my file structure

enter image description here

The .css file has the following code.

.jumbotron {
background-image: url(../images/fog-forest-lake-113727.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
color: white;
}

Upvotes: 0

Views: 337

Answers (1)

zeduke
zeduke

Reputation: 120

Short answer - The classname is lowercase in your css, it should be capital. Longer answer below which might be helpful to you.

I would recommend using `styled components'. Link is here.

For example your component could look like below

import React, { Component } from 'react';
import StyledWrapper from './styles/wrapper';

class Jumbotron extends Component {
 render() {
   return (
       <StyledWrapper>
           <div className="container">
            <h1 className="display-3">{this.props.title}</h1>
            <p className="lead">{this.props.subtitle}</p>
            <p className="lead">{this.props.name}</p>
           </div>
       </StyledWrapper>
      ) 
   }
 }

export default Jumbotron;

And in my wrapper.js file I would have the following

import styled from 'styled-components';

export default styled.div`
  background-image: url(../images/fog-forest-lake-113727.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: white;
`;

Upvotes: 1

Related Questions