css 样式在反应组件部分不起作用，但在主 src 目录中起作用答案

【问题标题】：css styles not working in react components section but works in the main src directorycss 样式在反应组件部分不起作用，但在主 src 目录中起作用
【发布时间】：2021-09-16 06:08:06
【问题描述】：

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

这就是我的目录的样子

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

我的 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 中进行样式设置时它可以工作。任何人都可以提出为什么会发生这种情况以及如何解决这个问题。

谢谢！

【问题讨论】：

标签： css reactjs jsx

【解决方案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

【讨论】：