React component is not reading my css file - css

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

Answer 1

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