css样式不在react组件部分中工作，但在src主目录中工作

Question

我正在尝试使用react构建一个基本网站，但我面临一个小问题

这就是我的目录看起来像的样子

/src
/components
Home.js
Home.css
App.js
App.css
image.jpg

My App.js包含以下代码：

import React, {useState, useEffect} from 'react';
import {BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Components/Home';
import './App.css';
function App() {
return (
<>
<Router>
<Switch>
<Route path="/" exact component ={Home}/>
</Switch>
</Router>
</>
);
}
export default App;

Home.js包含以下代码：

import React from 'react'
import pict from '../image.jpg'
function Home() {
return (
<>
<div className="Pix">
<img src={pict}/>;
</div>
</>
)
}
export default Home

现在我想将样式应用于此图像，但我无法使用Home.css来实现，但当我在App.css中进行样式设置时，它正在工作。有人能提出为什么会发生这种情况，以及如何解决这个问题吗。

谢谢！

Answer 1

您需要导入每个文件，以便在各个组件中应用样式。在这种情况下，您需要在Home.js内部导入Home.css才能使用它。

import React from 'react';
import pict from '../image.jpg';
import './Home.css'; 
function Home() {
return (
<>
<div className="Pix">
<img src={pict}/>;
</div>
</>
)
}
export default Home