我們正在為一個專案做一個 youtube 克隆，我正在嘗試對其進行樣式設定。無論我為樣式設定了什么，它都會忽略它并且沒有應用任何內容。我已經嘗試將它添加到主 div 和鏈接上，但它仍然無法正常作業。任何幫助將不勝感激
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;
}
uj5u.com熱心網友回復：
沒有呼叫 HTML 元素Link，因此您在執行此操作時不會針對任何內容，Link {而是需要執行以下操作：
.link {
// styles
}
然后做<Link className="link" />
https://reactrouter.com/docs/en/v6/api#link
A<Link>是一個元素，它允許用戶通過單擊或點擊來導航到另一個頁面。在 react-router-dom 中，a使用指向它鏈接到的資源的真實 href<Link>呈現可訪問元素。<a>這意味著像<Link>您期望的那樣右鍵單擊作品。您可以使用<Link reloadDocument>跳過客戶端路由并讓瀏覽器正常處理轉換（就好像它是一個<a href>）。
uj5u.com熱心網友回復：
使用 react 你必須使用 lowerCamelCase 作為 CSS 屬性。在組件中嘗試使用 marginBottom 而不是 margin-bottom。
使用 className='class1 class2 etc.' 如果你想在 HTML 元素中使用 CSS 類
<div className='class1 class2 etc.'>
或者
<div style={{marginBottom: '80px'}}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471321.html
標籤：javascript 反应
上一篇：中點公式在JS中回傳奇怪的輸出