React组件没有读取我的css文件

Question

由于某些原因，我的React组件没有读取我的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>
      ) 
   }
 }

导出默认Jumbotron；

在我的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;
`;