反应 backgroundImage 不能始终如一地工作

如何解决反应 backgroundImage 不能始终如一地工作

当我的组件在另一个组件中使用时，backgroundImage 内联样式按预期工作。但是，在 react-multi-carousel 中使用时，内联样式不再有效。

开发工具显示样式有效，只是由于某种原因在屏幕上不可见。 backgroundImage 是一个 url，但是硬编码的图像也不起作用。

任何帮助将不胜感激。

import { Product } from "../../types";

interface IMasonryPostProps {
    product: Product;
    showOverlay?: boolean;
}

export default function MasonryPost({
    product,showOverlay = true,}: IMasonryPostProps) {
    const backgroundImage = {
        backgroundImage: `url('${product.image}')`,color: "red",};
    const style = { ...backgroundImage,...product.style };
    const overlay = showOverlay ? "overlay" : "";
    console.log(style);
    return (
        <a
            className={`masonry-post ${overlay}`}
            href={product.image}
            style={style}
        >
            <div className="product-text">
                <div className="category-container">{product.category}</div>
                <div>
                    <h2 className="product-name">{product.title}</h2>
                    <span className="product-price">{product.price}</span>
                </div>
            </div>
        </a>
    );
}