Estamos haciendo un clon de YouTube para un proyecto y estoy tratando de diseñarlo. Independientemente de lo que pongo para el estilo, lo descarta y no se aplica nada. Intenté agregarlo en el div principal, el enlace, y todavía no funciona.
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; }No hay ningún elemento HTML llamado Link , por lo que no está apuntando a nada cuando hace Link { en su lugar, tendría que hacer:
.link { // styles } Luego haz <Link className="link" />
https://reactrouter.com/docs/en/v6/api#enlace
Un <Link> es un elemento que permite al usuario navegar a otra página haciendo clic o tocándola. En react-router-dom, un <Link> representa un elemento <a> accesible con un href real que apunta al recurso al que se vincula. Esto significa que cosas como hacer clic con el botón derecho en un <Link> funcionan como cabría esperar. Puede usar <Link reloadDocument> para omitir el enrutamiento del lado del cliente y permitir que el navegador maneje la transición normalmente (como si fuera un <a href> ).
Con reaccionar, debe usar lowerCamelCase para los atributos CSS. Pruebe marginBottom en lugar de margin-bottom en su componente.
Utilice className='class1 class2 etc.' si desea utilizar clases CSS en elementos HTML
<div className='class1 class2 etc.'>O
<div style={{marginBottom: '80px'}}>