React开发Gemini克隆项目：侧边栏CSS样式不生效求助

你的侧边栏样式不生效主要有几个明显的错误，逐一修正即可：

1. 修正CSS导入路径的多余斜杠 #

你的导入语句末尾多了一个斜杠，导致打包工具无法正确定位CSS文件：

// 错误写法
import './Sidebar.css/'
// 正确写法
import './Sidebar.css'

2. 修正JSX中的类名拼写错误 #

React中使用className（首字母大写）而非classname，同时你的代码里还有一处clasname的拼写错误（少了一个s）：

// 错误：classname 改为 className
<div classname='sidebar'> → <div className='sidebar'>

// 错误：clasname 改为 className
<img clasname='menu' src={assets.menu_icon} alt="" /> → <img className='menu' src={assets.menu_icon} alt="" />

修正后的完整Sidebar.jsx代码 #

import React from 'react'
import './Sidebar.css'
import {assets} from '../../assets/assets'

const Sidebar = () => {
  return (
    <div className='sidebar'>
      <div className="top">
        <img className='menu' src={assets.menu_icon} alt="" />
        <div className="new-chat">
          <img src={assets.plus_icon} alt="" />
          <p>New Chat</p>
        </div>
        <div className="recent">
          <p className="recent-title">Recent</p>
          <div className="recent-entry">
            <img src={assets.message_icon} alt="" />
            <p>What is react ...</p>
          </div>
        </div>
      </div>
      <div className="bottom"></div>
      <div className="bottom-item recent-entry">
        <img src={assets.question_icon} alt="" />
        <p>Help</p>
      </div>
      <div className="bottom-item recent-entry">
        <img src={assets.history_icon} alt="" />
        <p>Activity</p>
      </div>
      <div className="bottom-item recent-entry">
        <img src={assets.setting_icon} alt="" />
        <p>Settings</p>
      </div>
    </div>
  )
}

export default Sidebar

额外检查项 #

确认Sidebar.css文件和Sidebar.jsx在同一目录下，这样导入路径才会生效。

内容的提问来源于stack exchange，提问作者Ryan Hajji