由于某种原因,我的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;
}
答案 0 :(得分: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;
`;