React component is not reading my css file

Question

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

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;
}

the classname is capital Jumbotron but in ur css it is all lowercase jumbotron... — Yongzhi
– Yongzhi, Commented Dec 19, 2018 at 21:27

zeduke · Accepted Answer · 2018-12-19 21:36:05Z

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;
`;

Collectives™ on Stack Overflow

React component is not reading my css file

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