React组件未读取我的css文件

Question

由于某种原因，我的React Component无法读取我的CSS文件。这是我的React组件中的代码。

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;

下面是我的文件结构

.css文件具有以下代码。

.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

简短的回答-您的CSS中的类名是小写，应该大写。下面的较长答案可能对您有所帮助。

我建议使用“样式化的组件”。 Link在这里。

例如，您的组件可能如下所示

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

导出默认的巨型机；

在我的wrapper.js文件中，我将得到以下内容

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