为什么 CSS 模块样式没有应用于 React 子组件列表中的第一个组件？

Question

我正在使用 Gatsby 来构建这个电子商务网站，主要使用 CSS 模块来设计我的 React 组件的样式（对于某些部分还有一点点 Material-UI） .

我的网站在开发中按预期工作，但在我将网站部署到 Netlify 后在生产中，我的购物车（父组件）内的 CartItem（子组件）在我刷新页面或访问该页面时失去了它的样式url（例如 www.mywebsite.com/cart）从外部网站重定向到 URL.

但有趣的是，这只发生在列表中的第一个 CartItem 组件（或者如果只有一个 CartItem）。所有后续 CartItem 的样式都正常工作。

在这里，我的购物车呈现了一个购物车商品列表（如果有的话）：

import React, { useContext } from "react";
import { Link } from "gatsby";

import CartContext from "../contexts/CartContext";
import CartItem from "./CartItem";
import Checkout from "./Checkout";
import styles from "./Cart.module.scss";

const CartPage = () => {
  const { cart } = useContext(CartContext);

  const { cartHeader, basket } = styles;

  const renderCartItems = () => {
    if (cart && cart.length !== 0) {
      return cart.map(({ sku, quantity, name, size, price, image, slug }) => {
        return (
          <CartItem
            key={sku}
            sku={sku}
            quantity={quantity}
            name={name}
            size={size}
            price={price}
            image={image}
            slug={slug}
          ></CartItem>
        );
      });
    }

    return (
      <div>
        Your cart is empty! Continue shopping{" "}
        <Link style={{ color: "#9c7451", fontWeight: "bold" }} to="/store/">
          here.
        </Link>
      </div>
    );
  };

  return (
    <div>
      <div className={cartHeader}>
        <h1>Shopping Cart</h1>
      </div>
      <div className={basket}>{renderCartItems()}</div>
      {cart && cart.length !== 0 && <Checkout />}
    </div>
  );
};

export default CartPage;

这是购物车：

import React, { useContext } from "react";
import Img from "gatsby-image";

import CartContext from "../contexts/CartContext";
import styles from "./CartItem.module.scss";

const CartItem = props => {
  const { onRemoveFromCart } = useContext(CartContext);

  const {
    item,
    section1,
    itemImage,
    productInfo,
    removeItem,
    section2,
  } = styles;

  return (
    <div className={item}>
      <div className={section1}>
        <Img
          className={itemImage}
          fluid={props.image.childImageSharp.fluid}
          alt={props.name}
        />
        <div className={productInfo}>
          <h4>{props.name}</h4>
          <div
            className={removeItem}
            onClick={() => onRemoveFromCart(props.sku)}
            onKeyDown={() => onRemoveFromCart(props.sku)}
            role="button"
            tabIndex={0}
          >
            Remove
          </div>
        </div>
      </div>
      <div className={section2}></div>
    </div>
  );
};

export default CartItem;

这是 CartItem

的 CSS 模块

.item {
  margin-top: 30px;
  border-top: 1px solid #dedede;
  padding-top: 30px;

  .section1 {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    grid-gap: 1rem;

    .itemImage {
      &:hover {
        opacity: 0.8;
      }
    }

    .productInfo {
      padding-top: 1.85rem;

      h4 {
        font-weight: bold;
      }

      .removeItem {
        display: inline-block;
        margin-top: 0.5rem;
        padding: 2px 2px 2px 0;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .section2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  .item {
    display: grid;
    grid-template-columns: 1fr 1fr;

    .section1 {
      grid-gap: 2rem;

      .productInfo {
        padding-top: 0;
      }
    }

    .section2 {
      justify-content: space-between;
      align-items: flex-start;

      .total {
        text-align: right;
      }
    }
  }
}

如果您想测试一下，请访问以下网站：https://www.roxannecamilledesigns.com

重现问题：

转到商店部分，点击商品并添加到购物车
从添加项目时显示的导航栏或弹出窗口导航到购物车
看到 CartItem 样式完美无缺
刷新页面并查看 CartItem 未设置样式
转到任何其他页面并使用导航栏在内部单击返回购物车，然后看到一切都已修复。
如果您在购物车中有两个单独的项目时重复此过程，您会注意到只有第一个组件存在样式问题。

如前所述，开发中一切正常。在生产中，当使用购物车的内部导航链接（如来自导航栏）时，所有样式都可以正常工作。但是刷新页面会弄乱第一个组件的样式。

这是一个示例，说明购物车中包含两个项目时应该是什么样子：

如果你们需要我这边的更多信息来帮助解决这个问题，请告诉我。谢谢！！

Answer 1

找出解决问题的方法。我将整个 CartItem 组件的 JSX 包装在一个 div 中，它没有使用 CSS 模块中指定的 class。这解决了问题，但我不确定原因的解释。

<div>
 {/* ...CartItem JSX */}
</div>

为什么 CSS 模块样式没有应用于 React 子组件列表中的第一个组件？

Why is the CSS module styling not being applied on the first component in a list of react child components?

reactjs

css-modules

gatsby