0

我不明白。我无法让网格布局在下面的上下文中工作。其他任何地方都以这种方式工作。你知道什么可能导致这种行为吗？

我尝试在组件内添加不必要的 div，更改网格区域、列等，但没有任何效果。我什至设置了一个全新的组件，以查看网格是否通常在我的应用程序中不起作用，但它确实有效，并且我成功地将其用于其他组件。所以它不应该是一个全球性的问题。必须是该组件内部的某些东西阻止了它。我不明白。

我渲染到屏幕的反应功能组件：

import React from "react";
import "./ReviewPreview.css";
import ReactStars from "react-rating-stars-component";
import { Link } from "react-router-dom";

export default function ReviewPreview(props) {
  return (
    <div classname="reviewPreviewGrid" style={props.style}>
      <div
        className="reviewImage"
        style={{
          backgroundImage: "url(" + props.urlFromParent + ")",
        }}
      ></div>
      <Link
        className="reviewTitleButton"
        style={{ textDecoration: "none" }}
        to={`/ReviewDetailed/${props.ratingID}`}
      >
        {props.children}
      </Link>
      <p className="reviewAddressSubtitle">{props.addressSubtitle}</p>
      <div className="reviewStars">
        <ReactStars key={Math.random()} count={5} size={40} activeColor="#0ab3da" edit={false} value={props.value} />
      </div>
      <div
        className="reviewProfilePic"
        style={{
          backgroundImage: `url(${require("../../assets/profilePlaceholderIcon.svg")})`,
        }}
      ></div>
    </div>
  );
}

和对应的css

.reviewPreviewGrid{
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 215px auto;
  grid-template-areas:
    "reviewTitleButton ."
    "reviewImage reviewAddressSubtitle";
}


.reviewImage {
  grid-area: reviewImage;
  margin: 0px;
  width: 100%;
  height: 576px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

.reviewTitleButton {
  grid-area: reviewTitleButton;
  margin: 0px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--color-space-cadet);
  letter-spacing: -0.023em;
  line-height: 22px;
  border: 0px;
  background-color: transparent;
  padding-left: 0px;
}

.reviewAddressSubtitle {
  grid: reviewAddressSubtitle;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--color-space-cadet);
  letter-spacing: 0.02em;
  line-height: 12px;
  color: rgba(54, 59, 97, 0.51);
  text-transform: uppercase;
  margin: 0px;
}

.reviewStars {
  margin-top: 0px;
}

.reviewProfilePic {
  grid: reviewProfilePic;
  margin: 0px;
  width: 64px;
  height: 64px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
  border-radius: 30pt;
  border-style: solid;
  border-color: var(--color-space-cadet);
  border-width: 1px;
}
4

0 回答 0