CODEWITHSUNDEEP
javascriptcssreactjs
CodingNewb
CodingNewb

Reputation: 129

Div is ignoring whatever styling I put on it

We are doing a YouTube clone for a project and I'm trying to style it. Regardless of what I put for styling it disregards it and nothing is applied. I have tried adding it on the main div, the link, and it still doesn't work.

import React from "react";
import { Link } from "react-router-dom";


const DisplayVideos = ({videos}) => {

    return ( 
        <div >
            {videos.map((video, index) => {
                // get video id
                return (
                    <div  style={{'margin-bottom': '80px'}}>
                        <Link to={`/video/${video.id.videoId}`}>
                            <div key={index}>
                                <img src={video.snippet.thumbnails.medium.url} alt="" />
                            </div>
                            <div>
                                <div >{video.snippet.title}</div>
                            </div> 
                        </Link>
                    </div>
                );
            })}
        </div>
    );
}
 
export default DisplayVideos;

styles page:
.display-title{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: rgb(29, 50, 67);
}
.display-description{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: rgb(0, 0, 0);
}

Link{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  
    /* CSS just to show the bounds */
    border: 2px solid;
    background-color: #eee

}
.text {
    width: 20%;
    inline-size: 10px; 
    overflow-wrap: break-word;
  }

Upvotes: 1

Views: 163

Answers (2)

Fasani
Fasani

Reputation: 5749

There is no HTML element called Link so you are not targeting anything when you do Link { instead you would need to do:

.link {
  // styles
}

Then do <Link className="link" />

https://reactrouter.com/docs/en/v6/api#link

A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <Link> work as you'd expect. You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).

Upvotes: 1

Guillaume
Guillaume

Reputation: 439

With react you have to use lowerCamelCase for CSS atributes. Try marginBottom instead of margin-bottom in your component.

Use className='class1 class2 etc.' if you want to use CSS classes in HTML elements

<div className='class1 class2 etc.'>

Or

<div style={{marginBottom: '80px'}}>

Upvotes: 0

Related Questions