React开发YouTube克隆项目时Div与Link组件样式不生效问题求助

Hey there, let's break down why your styles aren't working and fix them step by step:

1. Your CSS classes aren't being referenced in the component #

You defined classes like .display-title, .display-description, and .text in your stylesheet, but you never applied them to any elements in your DisplayVideos component. That's why those styles are completely ignored.

2. You can't target the React Router Link component directly in CSS #

Link is a React component, not a native HTML element. When it renders to the DOM, it becomes an <a> tag. So your Link{} CSS rule won't work—you need to target the underlying <a> tag, or add a class to the Link component and style that class.

3. (Bonus) Inline style syntax can be simplified #

While your current inline style {{'margin-bottom': '80px'}} is valid, React prefers camelCase property names, so marginBottom: '80px' is more idiomatic.

Fixed Component Code #

First, make sure you import your stylesheet at the top of your component (I'll assume it's named DisplayVideos.css):

import React from "react";
import { Link } from "react-router-dom";
import './DisplayVideos.css'; // Don't forget this import!

const DisplayVideos = ({videos}) => {
  return (
    <div className="videos-container">
      {videos.map((video, index) => {
        return (
          <div key={index} style={{marginBottom: '80px'}}> {/* Simplified inline style */}
            <Link to={`/video/${video.id.videoId}`} className="video-link"> {/* Added class to Link */}
              <div>
                <img src={video.snippet.thumbnails.medium.url} alt={video.snippet.title} /> {/* Added meaningful alt text */}
              </div>
              <div className="video-text-container">
                <div className="display-title">{video.snippet.title}</div> {/* Applied display-title class */}
                {/* Uncomment below if you want to show the description */}
                {/* <div className="display-description">{video.snippet.description}</div> */}
              </div>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export default DisplayVideos;

Fixed Stylesheet Code #

Now update your CSS to target the classes we added, and fix the Link styling by targeting its class:

.display-title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: rgb(29, 50, 67);
  width: 20%;
  overflow-wrap: break-word; /* Moved text wrapping here from unused .text class */
}

.display-description{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px; /* Adjusted size for better visual hierarchy */
  color: rgb(80, 80, 80);
}

.video-link {
  display: flex;
  flex-direction: column; /* Stack image and text vertically */
  justify-content: flex-start;
  align-items: flex-start;
  border: 2px solid #ccc;
  background-color: #eee;
  padding: 10px;
  text-decoration: none; /* Remove default link underline */
  color: inherit; /* Inherit text color to override default link blue */
}

.videos-container {
  display: grid; /* Optional: Add grid layout for a more YouTube-like video grid */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

Key Takeaways: #

• Always import your stylesheet into the component where you want to use the styles.
• Use custom classes to style React components (like adding className="video-link" to Link) instead of trying to target the component name directly.
• Apply your predefined CSS classes to the corresponding elements in your JSX to make them take effect.
• The optional grid layout helps organize videos neatly, similar to YouTube's interface.

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